gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:04:23 26 4
gpt4 key购买 nike

我目前正在学习 Treehouse 上的初学者 JavaScript 类(class),但一直陷入函数困境。为了更好地理解,我尝试创建一个计算器,将人类的年数转换为狗的年数。这是到目前为止我的代码:

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 专家愿意插话吗?

编辑:当我在表单中输入年龄时,它只会重新加载,而不是显示以狗年为单位的年龄(这是期望的结果)。

最佳答案

您的代码可以工作,尽管正如您所指出的,它并不好。

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>如果我愿意的话,这将进一步让我可以使用 CSS 自定义演示文稿。您无法设置 <br> 的样式元素。
  • 我正在修改 DOM 的一部分,而不是整个 DOM
  • 我已将我的事件处理程序绑定(bind)到 addEventListener 这不那么突兀
  • 我通过 DOM 提供的自然结构访问表单元素,而不是为每个元素运行完整的 DOM 查询
  • 我减少了一些代码

关于javascript - 试图理解 JS 函数 - 我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36726529/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com