Question

我目前正在使用Treehouse上的初学者JavaScript课程并继续坚持功能。为了更好地理解，我尝试创建一个计算器，将人类年代转换为狗年。到目前为止，这是我的代码：

HTML：

<div id="calculator">
  <form>
    <label>What is your current age in human years? <br>
    <input type="text" id="humanYears"></label> <br>
    <button type="text" id="calculate">Calculate</button>
  </form>
</div>

JS：

function calculate() {
 var humanYears = document.getElementById("humanYears").value;
 var dogYears = (humanYears * 7);
 document.write(dogYears);
}

document.getElementById("calculate").onclick = function(){calculate(); };

页面闪烁，我一直看到表格，没有结果。

我知道这段代码不正确，但我不明白为什么。我也知道我可以从Github复制其他人的代码，并且有一个功能正常的计算器，但这样做会破坏学习的目的。我宁愿知道为什么我的代码不起作用以及我可以做些什么来解决它。（我加倍，三重检查HTML和JS文件是否正确链接，它们是什么。）

那里的任何JS巫师都会关心进来吗？

编辑：当我在表格中输入年龄时，它只会重新加载，而不是显示狗年的年龄（这是期望的结果）。

Answer 1

您的代码有效，尽管您已经表明它不是很好。

＆＃13;

function calculate() {
 var humanYears = document.getElementById("humanYears").value;
 var dogYears = (humanYears * 7);
 document.write(dogYears);
}

document.getElementById("calculate").onclick = function(){calculate(); };

＆＃13;

<div id="calculator">
  <form>
    <label>What is your current age in human years? <br>
    <input type="text" id="humanYears"></label> <br>
    <button type="text" id="calculate">Calculate</button>
  </form>
</div>

＆＃13;

一些需要改进的注意事项：

避免使用document.write
表单应有submit个按钮（<input type="submit" value="Calculate">或<button type="submit">Calculate</button>
算术周围的括号是多余的：var dogYear = humanYears * 7;就足够了
并非所有内容都需要id属性，尽管这样可以轻松快速地进行DOM查询
您应该处理表单的submit事件，而不是按钮的click事件，因为如果我提交表单，您将要处理按键盘上的 Enter
你不需要calculate附近的额外功能，document.getElementById('calculate').onclick = calculate;就足够了

考虑到这些注意事项，以下是我如何改进您的计算器：

＆＃13;

var form = document.getElementById('calculator');

function calculate() {
  var years = form['humanYears'].value,
      dogYears = years * 7;

  document.getElementById('answer').innerText = dogYears;  
}

form.addEventListener('submit', calculate, false);

＆＃13;

<form id="calculator">
  <p>
    <label>
      What is your current age in human years?<br>
      <input type="text" name="humanYears">
    </label>
  </p>
  <p>
    <button type="submit">Calculate</button>
  </p>
  <p>
    Answer: <span id="answer"></span>
  </p>
</form>

＆＃13;

我改变的事情：

我使用<p>标签来控制空格而不是<br>，如果我选择的话，这将进一步让我自定义CSS演示。您无法设置<br>元素的样式。
我正在修改DOM的一部分，而不是修改整个DOM
我用addEventListener绑定了我的事件处理程序，这种方式不那么突兀
我通过DOM提供的自然结构访问表单元素，而不是为每个元素运行完整的DOM查询
我减少了一些代码

Answer 2

主要问题是document.write没有按照你的想象做到：

注意：当document.write写入文档流时，在已关闭（加载）的文档上调用document.write会自动调用document.open，这将清除文档。

请参阅document.write的文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/write

更好的方法是在页面上放置一个空元素，然后更改内容：

function calculate() {
    var humanYears = document.getElementById("humanYears").value;
    var dogYears = humanYears * 7;
    document.getElementById('output').innerText = dogYears;
}

document.getElementById("calculate").onclick = calculate;

<div id="calculator">
  <form>
      <label>What is your current age in human years? <br>
          <input type="text" id="humanYears">
      </label>
      <br>
      <button type="button" id="calculate">Calculate</button>
      <div id="output"></div>
  </form>
</div>

我还对您的脚本进行了一些小改进：

更改了HTML的缩进以使其更具可读性
将您的按钮更改为type="button" - 否则您的表单将会提交，并且当您单击按钮时页面将重新加载。在这种情况下，你实际上甚至不需要form元素，但它不会伤害任何东西。或者，您可以将return false添加到calculate函数中 - 这会告诉浏览器不要提交表单，因此不会重新加载页面
更改了添加onclick处理程序的方式 - 不需要将calculate函数包装在另一个函数中。在javascript中，函数实际上可以像变量一样传递。这就是我将onclick的值设置为calculate的原因 - 但请注意我遗漏了()。您希望onclick成为函数的引用，否则calculate函数将立即执行，onclick将被设置为函数的返回值 - 在这种情况下，那将是undefined。

Answer 3

这里您的工作代码尽可能少地改变：

<div id="calculator">
  <form>
    <label>What is your current age in human years? <br>
    <input type="text" id="humanYears"></label> <br>
    <button type="text" id="calculate">Calculate</button>
  </form>
</div>

<script>
  function calculate() {
    var humanYears = document.getElementById("humanYears").value;
    var dogYears = (humanYears * 7);
    document.write(dogYears);
  }

  document.getElementById("calculate").onclick = function(){calculate(); return false; };
</script>

假设您将所有内容放在一个文件中，则缺少脚本标记。如果没有，那么你仍然需要一个脚本标签来加载JS文件。
你的功能需要“返回假”;如果省略，页面将在写入输出后重新加载，并且不会看到输出。之所以会发生这种情况，是因为表单中按钮的默认行为是重新加载页面。通过返回“false”，你可以抑制它。

试图理解JS函数 - 我做错了什么？

3 个答案: