输入更改时，onchange不会自动工作
[英]onchange doesn't work automatically when an input changes
问题描述
I m writing a javascript to calculate a price based on user input and Total price based on calculated price. 
我正在写一个JavaScript来根据用户输入来计算价格，并根据所计算的价格来计算总价格。 I don't want to put onchange="Total();" 我不想放onchange =“ Total（）;” into user input because I want the Total function distinguish the value change of price input automatically. 进入用户输入，因为我希望合计功能自动区分价格输入的值变化。 Is there a way to do that? 有没有办法做到这一点？
<html>
user input:<input type="text" id="user-input" onchange="price();"><br>
price:<input type="text" id="calculation" onchange="Total();" readonly>
<br>
Total:<input type="text" id="result" readonly><br>
</html>
<script>
function price() {
var a = parseInt(document.getElementById('user-input').value),
b = document.getElementById('calculation');
b.value = a + 10;
}
function Total() {
var b = parseInt(document.getElementById('calculation').value),
c = document.getElementById('result');
c.value = b*2;
}
</script>
3 个解决方案
解决方案1
0 2017-08-01 06:23:43
If you are using Jquery try using a delegate . 如果您使用的是Jquery，请尝试使用委托 。 Here is a simple example. 这是一个简单的例子。
The below is the html. 下面是html。
user input:<input type="text" id="user-input">
The below is the javascript. 以下是javascript。
$( "body" ).delegate( "#user-input", "onchange", function() {
//your code here.
});
My answer will just make the onchange() event fire, the rest of the logic you have to code. 我的答案只会使onchange()事件触发，剩下的逻辑必须编写。
This is another example using JavaScript. 这是另一个使用JavaScript的示例。 I have tried and it is working fine. 我已经尝试过，并且工作正常。
The below is the html code. 以下是html代码。
<input type="text" id="userinput" onchange="price();">
The below is the JavaScript function. 以下是JavaScript函数。
function price()
{
//your code here.
}
解决方案2
0 2017-08-01 06:28:52
You can perform all the calculations in price() instead of having separate Total() . 您可以在price()执行所有计算，而不必使用单独的Total() 。 Since both price and result are readonly , user can't really change the values in them. 由于price和result均为readonly ，因此用户无法真正更改它们中的值。 Hence, just move the code from Total() to price() and it will work for you. 因此，只需将代码从Total()移到price() ，它将对您有用。 Below is the updated code: 下面是更新的代码：
function price() { var a = parseInt(document.getElementById('user-input').value), b = document.getElementById('calculation'), c = document.getElementById('result') b.value = a + 10; c.value = b.value * 2; }
user input:<input type="text" id="user-input" onchange="price();"><br> price: <input type="text" id="calculation" readonly> <br> Total: <input type="text" id="result" readonly><br>
解决方案3
0 已采纳 2017-08-01 06:29:30
I made a simple fiddle , in base of your code and applied a event between two inputs. 我根据您的代码做了一个简单的小提琴 ，并在两个输入之间应用了一个事件。 The dispatch, of second input is like manually, because is readonly. 第二个输入的分派类似于手动，因为它是只读的。
function price() {
var a = parseInt(document.getElementById('user-input').value),
b = document.getElementById('calculation');
b.value = a + 10;
if (b.onchange)
b.onchange();
}
function Total() {
console.log('binded');
var b = parseInt(document.getElementById('calculation').value),
c = document.getElementById('result');
c.value = b*2;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.