Question

我正在使用Murach的第4章javascript中的这个程序来计算一定年限和一定比率后的投资的未来价值。用户输入投资，年份和费率，然后单击按钮。

我的问题：函数calculate似乎运行onload而不是等待用户输入信息并单击按钮。我按照书中的说明进行操作，他们甚至在下一章（第5章）中给出了该程序的答案。下一章中的相同程序运行良好。唯一的区别是ch.5之前的程序有数据验证而ch.4中的程序没有。其中一个练习是编写没有数据验证的程序。

我觉得这只是我忽略的一件非常简单的事情。

我已经搜索了其他方法来做同样的事情，但我真的想在附加事件处理程序时修复window.onload函数。

这就是我所拥有的：

"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

您在此处调用processEntries功能

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

并将其设置为click个事件。它应该像这样工作

$("calculate").onclick = processEntries;

如果你的代码越来越长，那么使用$可能会给你带来很多麻烦，那么你使用了很多$并且你在项目中包含了jQuery。< / p>

javascript计算onload而不是onclick

1 个答案: