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

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

您的代码有效，但正如您所指出的那样，它不是很好。

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

 <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>

一些改进的注意事项：

• 避免 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; 就足够了

考虑到这些笔记，以下是我改进计算器的方法：

 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);

 <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>

我改变的事情：

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

Answer 2

主要问题是document.write并没有像你想象的那样做：

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

请参阅 document.write 的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元素，但它不会伤害任何东西。 或者，您可以在calculate函数中添加return false - 这将告诉浏览器不要提交表单，从而不会重新加载页面
• 更改了添加 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 文件。
• 你的函数需要一个“return false;”。 如果您省略它，页面将在写入输出后重新加载，并且不会看到输出。 发生这种情况是因为表单中按钮的默认行为是重新加载页面。 通过返回“false”，您可以抑制它。