Проблемы с домашним заданием в inner.html в javascript

#javascript #date

#javascript #Дата

Вопрос:

Для домашнего задания мне нужна программа, которая может вычислять день, месяц и знак зодиака. Я уже нашел алгоритм, но у меня возникли некоторые проблемы. Я использую inner.html , чтобы изменить абзац h4 на вычисляемый знак, и он просто остается на несколько секунд, а затем исчезает.

 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:

во-первых, ваш открывающий <form> тег не закрыт (‘>’ отсутствует).

Теперь ваша проблема: когда вы нажимаете на свою кнопку, форма отправляется и запускает обновление страницы. Поскольку у вас нет атрибута action в форме, это возвращает вас на ту же страницу. Это обновление — это то, что очищает результат, который вы только что написали в своем html.

Вы можете либо:

удалите тег form (простой, но не чистый код, поскольку вы четко определяете пользовательскую форму)
используйте событие отправки формы и предотвратите поведение по умолчанию (без обновления / перенаправления)
предотвратите поведение события нажатия вашей кнопки по умолчанию.

https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault Я расскажу вам, как это сделать, это цель домашнего задания, верно ? 🙂

Удачи

1. Привет, большое тебе спасибо ^^, я понял после часа чтения твоего комментария, что ты имел в виду xD, но, спасибо, чувак, все идет хорошо, так как я загружаю кнопку вот так <тип кнопки=»отправить» onclick=»calcular(); возвращает false;» name =»btncrear» id = «signo» class =»_button»> Calcular tu signo</кнопка>