Homework problems with inner.html in javascript
Question
For a homework I need a program that can calculate with day and month, and the zodiac sign. I already found the algorithm, but I'm having some trouble. I use inner.html to change the h4 paragraph to the sign that is calculated, and it just stays for a few seconds and then disappears.
function calcular(_dia, _mes) { var _mes = document.getElementById('mes').value; var _dia = document.getElementById('dia').value; var signo = ""; if (_mes == 12, _dia < 22) { signo = "Sagitario"; } else { signo = "Capricornio"; } if (_mes == 1, _dia < 20) { signo = "Capricornio"; } else { signo = "Acuario"; } if (_mes == 2, _dia < 19) { signo = "Acuarios"; } else { signo = "Piscis"; } if (_mes == 3, _dia < 21) { signo = "Piscis"; } else { signo = "Aries"; } if (_mes == 4, _dia < 20) { signo = "Aries"; } else { signo = "Tauro"; } if (_mes == 5, _dia < 21) { signo = "Tauro"; } else { signo = "Geminis"; } if (_mes == 6, _dia < 21) { signo = "Geminis"; } else { signo = "Cancer"; } if (_mes == 7, _dia < 23) { signo = "Cancer"; } else { signo = "Leo"; } if (_mes == 8, _dia < 23) { signo = "Leo"; } else { signo = "Virgo"; } if (_mes == 9, _dia < 23) { signo = "Virgo"; } else { signo = "libra"; } if (_mes == 10, _dia < 23) { signo = "Libra"; } else { signo = "Escorpio"; } if (_mes == 11, _dia < 22) { signo = "Escorpio"; } else { signo = "Sagitario"; } document.getElementById("s_z").innerHTML = signo; }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0"> <title>zodiaco</title> </head> <body class="body page-zodiaco clearfix"> <div class="regresar regresar-1 clearfix"> <div class="element"></div> <button onClick="window.location='index.html';" class="regresar"></button> </div> <div class="contenedor"> <form name="z" method="post"> <div class="principal clearfix"> <div class="element"></div> <p class="text text-1">Mi signo es</p> <p class="text text-2">Nombre</p> <p class="text text-3">Dia</p> <input class="_input _input-1 js-nombre" id="nombre" name="nombre" type="text"> <input class="_input _input-2 js-dia" id="dia" name="dia" type="number"> <input class="_input _input-3 js-mes" id="mes" name="mes" type="number"> <p class="text text-4">Mes</p> <input class="_input _input-4 js-año" name="año" type="number"> <p class="text text-5">Año</p> <button onclick="calcular();" name="btncrear" id="signo" class="_button">Calcular tu signo</button> </div> <div class="resultado"> <h4 id='s_z'>signo zodiacal</h4> </div> </form> </div> </body> </html>
1 answers
solution1
1 2019-03-28 17:00:48
first, your opening <form> tag is not closed ('>' missing).
Now your problem: when you click on your button, the form is submitted and triggers a page refresh. Since you don't have an action attribute on the form it brings you back on the same page. That refresh is what is clearing the result you just wrote in your html.
You can either:
- remove the form tag (easy, but not clean code since you are clearly defining a user form)
- use the submit event of the form and prevent default behavior (no refresh/redirection)
- prevent default behavior of the click event of your button.
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault I'll let you learn how to do that, that's the purpose of homework, right ? :)
Good luck
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.