Question

对于家庭作业，我需要一个可以按日和月计算以及生肖的程序。我已经找到了算法，但是遇到了麻烦。我使用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>

Answer 1

首先，打开的<form>标签未关闭（缺少'>'）。

现在是您的问题：单击按钮时，将提交表单并触发页面刷新。由于您在表单上没有动作属性，因此将您带回到同一页面。刷新是清除您刚刚在html中编写的结果的方法。

您可以：

删除表单标签（因为您已清晰定义了用户表单，所以简单易行，但代码不干净）
使用表单的Submit事件并阻止默认行为（不刷新/重定向）
防止按钮的click事件的默认行为。

https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault 我会让你学习如何做到这一点，这就是作业的目的，对吧？：）

祝你好运

JavaScript中inner.html的作业问题

1 个答案: