[英]Trying to understand JS functions - what am I doing wrong?
I'm currently working my way through a beginner's JavaScript course on Treehouse and keep getting stuck on functions.我目前正在学习 Treehouse 上的初学者 JavaScript 课程,但一直被困在函数上。 In effort to understand better, I tried creating a calculator which converts human years to dog years.为了更好地理解,我尝试创建一个计算器,将人类年转换为狗年。 Here is my code so far:到目前为止,这是我的代码:
HTML: 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: JS:
function calculate() {
var humanYears = document.getElementById("humanYears").value;
var dogYears = (humanYears * 7);
document.write(dogYears);
}
document.getElementById("calculate").onclick = function(){calculate(); };
The page flickers and I keep seeing the form, no result.页面闪烁,我一直看到表单,没有结果。
I know this code is incorrect but I don't understand why.我知道这段代码不正确,但我不明白为什么。 I also know I can just copy other people's code from Github and have a functioning calculator but that kind of defeats the purpose of learning.我也知道我可以从 Github 复制其他人的代码并拥有一个功能强大的计算器,但这违背了学习的目的。 I would rather know why my code doesn't work and what I can do to fix it.我宁愿知道为什么我的代码不起作用以及我可以做些什么来修复它。 (I double, triple checked that the HTML and JS files were properly linked, which they are.) (我两次、三次检查 HTML 和 JS 文件是否正确链接,它们是。)
Any JS wizards out there care to chime in?有没有 JS 高手愿意插话?
Edit: When I enter an age into the form, it merely reloads, rather than displaying the age in dog years (which is the desired outcome).编辑:当我在表单中输入一个年龄时,它只会重新加载,而不是以狗年为单位显示年龄(这是预期的结果)。
Your code works, although as you've indicated it's not great.您的代码有效,但正如您所指出的那样,它不是很好。
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>
Some notes for improvement:一些改进的注意事项:
submit
buttons (either <input type="submit" value="Calculate">
or <button type="submit">Calculate</button>
表单应该有submit
按钮( <input type="submit" value="Calculate">
或<button type="submit">Calculate</button>
var dogYear = humanYears * 7;
算术周围的括号是多余的: var dogYear = humanYears * 7;
is sufficient足够了id
attribute, although that makes DOM queries easy and quick并非所有东西都需要id
属性,尽管这使 DOM 查询变得简单快捷submit
event as opposed to the button's click
event as you'll want to handle if, say, I submit the form by pressing Enter on my keyboard您应该处理表单的submit
事件,而不是按钮的click
事件,因为如果我按键盘上的Enter 键提交表单,您将需要处理calculate
, document.getElementById('calculate').onclick = calculate;
您不需要围绕calculate
的额外功能, document.getElementById('calculate').onclick = calculate;
would suffice就足够了With those notes in mind, here's how I'd improve your calculator:考虑到这些笔记,以下是我改进计算器的方法:
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>
Things I've changed:我改变的事情:
<p>
tags to control whitespace instead of <br>
which will further let me customize presentation with CSS if I choose to.我使用<p>
标签来控制空格而不是<br>
,如果我愿意<br>
这将进一步让我使用 CSS 自定义演示文稿。 You cannot style <br>
elements.您不能设置<br>
元素的样式。addEventListener
which is way less obtrusive我已经将我的事件处理程序与addEventListener
绑定在一起,这样就不那么突兀了The main problem is that document.write
doesn't do what you imagine it does:主要问题是document.write
并没有像你想象的那样做:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.注意:当 document.write 写入文档流时,在关闭(加载)的文档上调用 document.write 会自动调用 document.open,这将清除文档。
See the documentation for document.write
:https://developer.mozilla.org/en-US/docs/Web/API/Document/write请参阅 document.write 的document.write
:https ://developer.mozilla.org/en-US/docs/Web/API/Document/write
A better way to this is to have an empty element on the page, which you then change the contents of:更好的方法是在页面上放置一个空元素,然后更改其内容:
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>
I've also made some small improvements to your script:我还对您的脚本进行了一些小的改进:
type="button"
- otherwise your form will submit and the page will reload when you click the button.将您的按钮更改为type="button"
- 否则当您单击按钮时,您的表单将提交并且页面将重新加载。 In this case, you actually don't even need a form
element, but it's not hurting anything.在这种情况下,您实际上甚至不需要form
元素,但它不会伤害任何东西。 Alternatively, you could add return false
to your calculate
function - this would tell the browser not to submit the form and thus not reload the page或者,您可以在calculate
函数中添加return false
- 这将告诉浏览器不要提交表单,从而不会重新加载页面calculate
function in another function.更改了添加 onclick 处理程序的方式 - 无需将calculate
函数包装在另一个函数中。 In javascript, functions can actually be passed around like a variable.在 javascript 中,函数实际上可以像变量一样传递。 This is why I set the value of onclick
to just be calculate
- notice however that I left out the ()
.这就是为什么我将onclick
的值设置为只是calculate
- 但是请注意我遗漏了()
。 You want the onclick to be a reference to the function, otherwise the calculate
function would be executed immediately, and the onclick
would be set to the return value of the function - in this case, that would be undefined
.您希望 onclick 是对函数的引用,否则calculate
函数将立即执行,并且onclick
将设置为函数的返回值 - 在这种情况下,它将是undefined
。Here your working code with as little changes as possible:这里你的工作代码有尽可能少的变化:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.