javascript 计算 onload 而不是 onclick

Question

I'm working on this program from Murach's javascript in ch 4 that calculates the future value of an investment after a certain amount of years and at a certain rate.我正在第 4 章中使用 Murach 的 javascript 开发这个程序，该程序计算特定年限和特定速率后投资的未来价值。 The user inputs investment, years and rate, then clicks a button.用户输入投资、年份和利率，然后单击按钮。

My problem: The function calculate seems to run onload instead of waiting for the user to input information and click the button.我的问题：计算函数似乎在加载时运行，而不是等待用户输入信息并单击按钮。 I've followed the instructions in the book and they even give the answer to this program in the following chapter (ch.5).我已经按照书中的说明进行操作，他们甚至在下一章（第 5 章）中给出了该程序的答案。 The same program in the next chapter runs, well.下一章中的相同程序运行良好。 The only difference is that the program from before in ch.5 has data validation and the one in ch.4 doesn't.唯一的区别是ch.5之前的程序有数据验证而ch.4中的程序没有。 One of the exercises is to write the program without data validation.练习之一是在没有数据验证的情况下编写程序。

I feel like it's just something really simple that I have overlooked.我觉得这只是我忽略的一些非常简单的事情。

I've searched up other ways to do the same thing, but I would really like to fix what I have with the window.onload function while attaching the event handler.我已经搜索了其他方法来做同样的事情，但我真的很想在附加事件处理程序时用 window.onload 函数修复我所拥有的东西。

Here is what I have:这是我所拥有的：

 "use strict" var $ = function(id) { return document.getElementById(id); }; var calculateFV = function(investment,rate,years) { var futureValue = investment; for (var i = 1; i <= years; i++ ) { futureValue = futureValue + (futureValue * rate / 100); } futureValue = futureValue.toFixed(2); return futureValue; }; var processEntries = function() { var investment = parseFloat( $("investment").value ); var rate = parseFloat( $("rate").value ); var years = parseInt( $("years").value ); $("future_value").value = calculateFV(investment,rate,years); }; window.onload = function() { $("calculate").onclick = processEntries(); $("investment").focus(); };

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Future Value Calculator</title> <link rel="stylesheet" href="future_value.css"> <script src="future_value.js"></script> </head> <body> <main> <h1>Future Value Calculator</h1> <label for="investment">Total Investment:</label> <input type="text" id="investment"><br> <label for="rate">Annual Interest Rate:</label> <input type="text" id="rate">%<br> <label for="years">Number of Years:</label> <input type="text" id="years"><br> <label for="future_value">Future Value:</label> <input type="text" id="future_value" disabled><br> <label>&nbsp;</label> <input type="button" id="calculate" value="Calculate"><br> </main> </body> </html>

Answer 1

You're invoking the processEntries function here您在这里调用processEntries函数

 $("calculate").onclick = processEntries();

and setting it to click event.并将其设置为click事件。 It should be like this to work工作应该是这样的

$("calculate").onclick = processEntries;

And using $ might cause you a lot of trouble in the future if your code gets longer then you use a lot of $ and you include to jQuery in your project.如果您的代码变得更长，那么使用$可能会在将来给您带来很多麻烦，然后您使用大量$并将其包含到您的项目中的jQuery中。

javascript 计算 onload 而不是 onclick

问题描述

1 个解决方案

解决方案1
1 2018-02-17 00:32:17

javascript 计算 onload 而不是 onclick

问题描述

1 个解决方案

解决方案1 1 2018-02-17 00:32:17

解决方案1
1 2018-02-17 00:32:17