为啥我的函数在每次页面加载时只运行一次？
Posted
技术标签:
【中文标题】为啥我的函数在每次页面加载时只运行一次？【英文标题】：Why does my function only run once per page load?为什么我的函数在每次页面加载时只运行一次？ 【发布时间】：2012-08-13 01:45:28 【问题描述】：我正在编写一个脚本，该脚本使用表单中的文本输入进行计算。出于某种原因，我的计算在每次页面加载时只执行一次。当我按下“计算”按钮时，我必须刷新页面才能再次运行该功能。
这是我的按钮的 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.";
;
我是否正在做一些事情来阻止函数在每次页面加载时运行多次？
【问题讨论】：
high, low, common 来自哪里？
如果我们更改这三个值的值，代码工作正常。输出正在改变。你能创建一个你的代码的jsfiddle吗？
@Abhishek，这是整页的小提琴。由于某种原因，我的程序现在也不会超过第一个 if/else 语句。 jsfiddle.net/vdrwh
【参考方案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>
jsfiddleSee it working 或许这会对你有所帮助。
【讨论】：
【参考方案2】：对我来说，如果我更改值 high、low 和 common，你的代码也可以工作，试试这个方法，它可能对你有用
<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));
【讨论】：
以上是关于为啥我的函数在每次页面加载时只运行一次？的主要内容，如果未能解决你的问题，请参考以下文章
让 `didFailLoadWithError:` 在启动时只运行一次