Javascript 从表单中获取用户输入执行计算（操作顺序）并输出回该表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12306784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
take user input from a Form perform calculation (order of operations) and output back into that form
提问by user1635052
I'm trying to take input from one element of Form (INPUT1) and perform a calculation which would essentially OUTPUT1=((INPUT1/20).58).30 I've seen a number of examples for conversion of CM to inches etc.. But nothing with order of operations. Please help! The wall and my head have met too many times. This is what I have so far, (which doesn't work)
我正在尝试从 Form (INPUT1) 的一个元素中获取输入并执行一个计算，该计算基本上是 OUTPUT1=((INPUT1/20) .58).30 我已经看到了许多将 CM 转换为英寸等的示例.. 但与操作顺序无关。请帮忙！墙壁和我的脑袋相遇太多次了。这是我到目前为止所拥有的（不起作用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr> <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th> </tr>
<tr></tr>
<td><input type="number" name="INPUT1"/></td>
<td><input type="number" name="OUTPUT1"></td>
<table>
</form>
<script type="text/javascript">
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
var CALC3 = OUTPUT1;
</script>
</body>
</html>
回答by BBog
You did a couple of things incorrectly.
你做错了几件事。
First of all, the input value must be read at a certain time. For example, when a button is pressed, when the input field's value changes or similar situations. In your case, it was read as soon as the document was parsed, when the input field did not have any value.
首先，必须在某个时间读取输入值。例如，当按下按钮时，当输入字段的值发生变化或类似情况时。在您的情况下，当输入字段没有任何值时，它会在解析文档后立即读取。
Second, you did not write the result to the output field.
This line var CALC3 = OUTPUT1;redeclares the CALC3 variable and gives it the value OUTPUT1. What you want is to set the value of the field OUTPUT1 as CALC3
其次，您没有将结果写入输出字段。此行var CALC3 = OUTPUT1;重新声明 CALC3 变量并为其指定值 OUTPUT1。您想要的是将字段 OUTPUT1 的值设置为 CALC3
Try this:
尝试这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr> <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th> </tr>
<tr></tr>
<td><input type="number" name="INPUT1" id="input" onchange="calculate();"/></td>
<td><input type="number" name="OUTPUT1" id="output"></td>
<table>
</form>
<script type="text/javascript">
function calculate() {
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
document.TESTING.OUTPUT1.value = CALC3;
}
</script>
</body>
</html>
When the value from the first input field changes, it calls the function calculate() (onchange="calculate();") and then automatically updates the second field (you write the value just like you read it document.TESTING.OUTPUT1.value = CALC3;).
当第一个输入字段中的值发生变化时，它会调用函数 calculate() ( onchange="calculate();") 然后自动更新第二个字段（您写入值就像读取它一样document.TESTING.OUTPUT1.value = CALC3;）。
[edit] The first version of the code is pretty much like yours, so you will be able to understand it more easily, but you should also take a look at this. You had some misplaced table row tags and some untidy code, so I also cleaned it up a little. It's still far from best practice, but it's an improved version of your page
[编辑] 代码的第一个版本与您的非常相似，因此您将能够更容易地理解它，但您也应该看看这个。你有一些错位的表格行标签和一些不整洁的代码，所以我也清理了一点。这离最佳实践还很远，但它是您页面的改进版本
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr>
<th colspan="2">
<h1>TESTING</h1>
</th>
</tr>
<tr>
<th>
<h3>INPUT</h3>
</th>
<th>
<h3>OUTPUT</h3>
</th>
</tr>
<tr>
<td>
<input type="number" name="INPUT1" id="input" onchange="calculate();"/>
</td>
<td>
<input type="number" name="OUTPUT1" id="output">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate() {
var USERINPUT1 = document.TESTING.INPUT1.value,
RESULT = (USERINPUT1/20) * .585 * .30;
document.TESTING.OUTPUT1.value = RESULT;
}
</script>
</body>
</html>
回答by Chase
Are you able to use jQuery at all?
你能使用jQuery吗？
If so, then this uses what you've provided: http://jsfiddle.net/vuYMs/
如果是这样，那么这将使用您提供的内容：http: //jsfiddle.net/vuYMs/
Otherwise I can modify it to work without jQuery.
否则我可以修改它以在没有 jQuery 的情况下工作。
EDIT:
编辑：
Here's a more javascript oriented solution: http://jsfiddle.net/vuYMs/3/
这是一个更面向 javascript 的解决方案：http: //jsfiddle.net/vuYMs/3/
var input1 = document.getElementsByName("INPUT1")[0];
var output1 = document.getElementsByName("OUTPUT1")[0];
function changeInput(e){
var calc = (((input1.value/20)*0.585)*0.30);
output1.value = calc;
}
input1.onchange = changeInput;
回答by Aratidgr8
Below code will build the needful automatic calculator.
下面的代码将构建所需的自动计算器。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(ele)
{
var result = ((ele / 20) * 0.585) * 0.30;
document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0; padding:0; }
.container { background:#0CC; border:1px dotted #bbb; margin:40px auto 0 auto; padding: 20px; width:500px; }
h1 { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:bold; text-align:center; text-decoration:underline; }
input { border:1px solid #eee; }
.container p label { width:100px; float:left; }
p { clear:both; }
</style>
</head>
<body>
<form name="testing" method="post" action="">
<div class="container">
<h1> My Calculator</h1>
<p><label>Input : </label><input type="number" name="input1" value="" onBlur="calculate(this.value);"/></p>
<p><label>Output : </label><input type="number" name="output1" id="output1"></p>
</div>
</form>
</body>
</html>
