javascript javascript在更改任何数字时自动计算简单乘法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16742299/
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
javascript to calculate simple multiplication automatically upon changing any number
提问by otmezger
I'm not a javascript programmer, but I have to use it for a calculation I need to do on a wordpress page.
我不是 javascript 程序员，但我必须使用它来计算我需要在 wordpress 页面上进行的计算。
Here is what I need:
这是我需要的：
- 3 fields in html where I can enter a number (a form).
- a text field where the multiplication is "printed"
- if I change one element, a new result must apear, without me needing to push any button.
- html 中的 3 个字段，我可以在其中输入一个数字（一个表单）。
- “打印”乘法的文本字段
- 如果我更改一个元素，则必须出现新结果，而无需按任何按钮。
any idea on how to do this? I know how to do the calculation as such, but not that it works automatically.
关于如何做到这一点的任何想法？我知道如何进行计算，但不知道它会自动运行。
HEre is what I got so far:
这是我到目前为止所得到的：
<html>
<head>
<title>Simple Javascript Calculator - Basic Arithmetic Operations</title>
<script language="javascript" type="text/javascript">
function multiply(){
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=a*b;
document.calculator.total.value=c;
}
</script>
</head>
<body>
<!-- Opening a HTML Form. -->
<form name="calculator">
<!-- Here user will enter 1st number. -->
Number 1: <input type="text" name="number1">
<!-- Here user will enter 2nd number. -->
Number 2: <input type="text" name="number2">
<!-- Here result will be displayed. -->
Get Result: <input type="text" name="total">
<!-- Here respective button when clicked, calls only respective artimetic function. -->
<<input type="button" value="MUL" onclick="javascript:multiply();">
</form>
</body>
</html>
thanks
谢谢
回答by Travis J
jsFiddle Demo
jsFiddle Demo
You are going to be forced to use an interval if you want to monitor two inputs and handle all changes (such as pasting in, either from a mouse, from ctrl+v, from using the edit+paste browser input, from typing, etc.).
如果您想监视两个输入并处理所有更改（例如粘贴，从鼠标，从 ctrl+v，从使用编辑+粘贴浏览器输入，从键入等），您将被迫使用间隔.)
If you do not need to handle all cases, then onkeyup will work as Bart suggests. Here is an interval approach:
如果您不需要处理所有情况，那么 onkeyup 将按照 Bart 的建议工作。这是一种间隔方法：
var x = document.getElementById("x");
var y = document.getElementById("y");
var d = document.getElementById("d");
var xstored = x.getAttribute("data-in");
var ystored = y.getAttribute("data-in");
setInterval(function(){
if( x == document.activeElement ){
var temp = x.value;
if( xstored != temp ){
xstored = temp;
x.setAttribute("data-in",temp);
calculate();
}
}
if( y == document.activeElement ){
var temp = y.value;
if( ystored != temp ){
ystored = temp;
y.setAttribute("data-in",temp);
calculate();
}
}
},50);
function calculate(){
d.innerHTML = x.value * y.value;
}
x.onblur = calculate;
calculate();
回答by Bart
This will not answer the problem for your specific question but a nice way to do your calculations is through the evalfunction.
这不会回答您特定问题的问题，但是通过eval函数进行计算是一个很好的方法。
The HTML:
HTML：
<input type="text" id="expression" value="1 + 1" />
<hr />
<h3 id="result"></h3>
The Javascript:
Javascript：
var input = document.getElementById('expression');
input.onkeyup = function () {
var result = document.getElementById('result');
result.innerHTML = eval(this.value);
};
//evaluate initial value
input.onkeyup();
回答by Tafadzwa Gonera
use the onchangeevent on each inputelement so that when a user changes input[value]an operation is triggered. You should also cache the previously performed operation so that it's applied to the operands when onchange event is triggered
onchange在每个input元素上使用事件，以便在用户更改input[value]操作时触发。您还应该缓存之前执行的操作，以便在触发 onchange 事件时将其应用于操作数
