我正在编写一个脚本,使用表单中的文本输入进行计算。出于某种原因,我的计算仅在每页加载时执行一次。当我按下“计算”按钮时,我必须刷新页面以使功能再次运行。
这是我的按钮的HTML:
<input type="button" value="Calculate" onclick="calculate(high, low, common);" />
<input type="reset" />
<div id="result"></div>
这是计算函数(变量在别处定义):
var calculate = function (high, low, common) {
if (high.length < 1 || low.length < 1 || common.length <1) {
document.getElementById('result').innerHTML="Please enter a number for all fields.";
} else {
if ((high - common) > (common - low)) {
document.getElementById('result').innerHTML="Result 1.";
} else if ((common - low) > (high - common)) {
document.getElementById('result').innerHTML="Result 2.";
} else if ((common - low) === (high - common)) {
document.getElementById('result').innerHTML="Result 3.";
}
}
};
我是否正在做一些阻止函数每页加载运行多次的事情?
答案 0 :(得分:1)
您的代码问题在于您只是在第一次加载页面时设置高,低,常用。 这些值始终保持不变。
您应该在onclick事件中传递您的值。
更新了您的 - jsfiddle
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Calculator</h1>
<!--Form forvalue inputs-->
<form>
<label for="highRi">Highest:</label><input type ="text" id="highRi" />
<label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
<label for="comm">Common Point:</label><input type ="text" id="comm" />
<!--Clicking the button should run the calculate() function-->
<input type="button" value="Calculate" onclick="calculate(document.getElementById('highRi').value, document.getElementById('lowRi').value, document.getElementById('comm').value);" />
<input type="reset" />
<!--Div will populate with result after calculation is performed-->
<div id="result"></div>
</form>
<script type="text/javascript">
var calculate = function (high, low, common) {
if (high.length < 1 || low.length < 1 || common.length <1) {
document.getElementById('result').innerHTML="Please enter a number for all fields.";
} else {
if ((high - common) > (common - low)) {
document.getElementById('result').innerHTML="Result 1.";
} else if ((common - low) > (high - common)) {
document.getElementById('result').innerHTML="Result 2.";
} else if ((common - low) === (high - common)) {
document.getElementById('result').innerHTML="Result 3.";
}
}
};
</script>
</body>
</html>
或者您可以在函数调用中获取这些元素值。
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Calculator</h1>
<!--Form forvalue inputs-->
<form>
<label for="highRi">Highest:</label><input type ="text" id="highRi" />
<label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
<label for="comm">Common Point:</label><input type ="text" id="comm" />
<!--Clicking the button should run the calculate() function-->
<input type="button" value="Calculate" onclick="calculate();" />
<input type="reset" />
<!--Div will populate with result after calculation is performed-->
<div id="result"></div>
</form>
<script type="text/javascript">
var calculate = function () {
var high = document.getElementById('highRi').value;
var low = document.getElementById('lowRi').value
var common = document.getElementById('comm').value
if (high.length < 1 || low.length < 1 || common.length <1) {
document.getElementById('result').innerHTML="Please enter a number for all fields.";
} else {
if ((high - common) > (common - low)) {
document.getElementById('result').innerHTML="Result 1.";
} else if ((common - low) > (high - common)) {
document.getElementById('result').innerHTML="Result 2.";
} else if ((common - low) === (high - common)) {
document.getElementById('result').innerHTML="Result 3.";
}
}
};
</script>
Jsfiddle See it working 可能这会对你有帮助。
答案 1 :(得分:0)
对我而言,如果我将值更改为高,低和常见,您的代码是有效的,尝试此方法,它可能适合您
<input type="button" id="button" value="Calculate" />
var button = document.getElementById("button");
var high = document.getElementById("high").value;
var low = document.getElementById("low").value;
var common = document.getElementById("common").value;
button.addEventListener(onclick, calculate(high, low, common));