hlh*_*hlh 5 javascript forms function
我正在编写一个脚本,使用表单中的文本输入进行计算.出于某种原因,我的计算仅在每页加载时执行一次.当我按下"计算"按钮时,我必须刷新页面以使功能再次运行.
这是我的按钮的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.";
}
}
};
我是否正在做一些阻止该功能每页加载运行多次的东西？
您的代码的问题在于您只是在第一次加载页面时设置高、低、通用。\n这些值始终保持不变。
\n\n您应该在 onclick 事件中传递您的值。
\n\n更新了你的 - jsfiddle
\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Calculator</title>\n <meta charset = "UTF-8" />\n</head>\n<body>\n\n<h1>Calculator</h1>\n\n<!--Form forvalue inputs-->\n\n<form>\n <label for="highRi">Highest:</label><input type ="text" id="highRi" />\n <label for="lowRi">Lowest:</label><input type="text" id="lowRi" />\n <label for="comm">Common Point:</label><input type ="text" id="comm" />\n\n<!--Clicking the button should run the calculate() function-->\n\n <input type="button" value="Calculate" onclick="calculate(document.getElementById(\'highRi\').value, document.getElementById(\'lowRi\').value, document.getElementById(\'comm\').value);" />\n <input type="reset" />\n\n<!--Div will populate with result after calculation is performed-->\n\n <div id="result"></div> \n</form>\n\n<script type="text/javascript">\n\n\nvar calculate = function (high, low, common) {\n if (high.length < 1 || low.length < 1 || common.length <1) {\n document.getElementById(\'result\').innerHTML="Please enter a number for all fields.";\n } else {\n if ((high - common) > (common - low)) {\n document.getElementById(\'result\').innerHTML="Result 1.";\n } else if ((common - low) > (high - common)) {\n document.getElementById(\'result\').innerHTML="Result 2.";\n } else if ((common - low) === (high - common)) {\n document.getElementById(\'result\').innerHTML="Result 3.";\n }\n}\n\n}; \n\n</script>\n\n</body>\n</html>\n或者您可以简单地在函数调用中获取这些元素值。
\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>Calculator</title>\n<meta charset = "UTF-8" />\n</head>\n<body>\n\n<h1>Calculator</h1>\n\n<!--Form forvalue inputs-->\n\n<form>\n <label for="highRi">Highest:</label><input type ="text" id="highRi" />\n <label for="lowRi">Lowest:</label><input type="text" id="lowRi" />\n <label for="comm">Common Point:</label><input type ="text" id="comm" />\n\n<!--Clicking the button should run the calculate() function-->\n\n <input type="button" value="Calculate" onclick="calculate();" />\n <input type="reset" />\n\n<!--Div will populate with result after calculation is performed-->\n\n <div id="result"></div> \n</form>\n\n<script type="text/javascript">\n\n\nvar calculate = function () {\n var high = document.getElementById(\'highRi\').value;\n var low = document.getElementById(\'lowRi\').value\n var common = document.getElementById(\'comm\').value\n if (high.length < 1 || low.length < 1 || common.length <1) {\n document.getElementById(\'result\').innerHTML="Please enter a number for all fields.";\n } else {\n if ((high - common) > (common - low)) {\n document.getElementById(\'result\').innerHTML="Result 1.";\n } else if ((common - low) > (high - common)) {\n document.getElementById(\'result\').innerHTML="Result 2.";\n } else if ((common - low) === (high - common)) {\n document.getElementById(\'result\').innerHTML="Result 3.";\n }\n}\n\n}; \n\n</script>\n\n\n\xe2\x80\x8b\nJsfiddle看看它工作\n\xe2\x80\x8b\n也许这会对你有帮助。
\n