输入更改时 onchange 不会自动工作

Question

我正在编写 javascript 以根据用户输入计算价格，并根据计算价格计算总价。我不想将 onchange="Total();" 放入用户输入中，因为我希望 Total 函数自动区分价格输入的值变化。有办法吗？

 <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>

Answer 1

如果您正在使用 Jquery，请尝试使用委托。这是一个简单的例子。

下面是html.

user input:<input type="text" id="user-input">

下面是javascript.

$( "body" ).delegate( "#user-input", "onchange", function() {
  //your code here.
});

我的回答只会触发 onchange() 事件，其余的逻辑您必须编写代码。

这是另一个使用 JavaScript 的例子。我试过了，效果很好。

下面是html代码。

<input type="text" id="userinput" onchange="price();">

下面是JavaScript函数。

function price()
{
    //your code here.
}

Answer 2

您可以在 price() 中执行所有计算，而不用单独进行 Total()。由于 price 和 result 都是 readonly，因此用户无法真正更改其中的值。因此，只需将代码从 Total() 移至 price() 即可。以下是更新后的代码：

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>

Answer 3

我根据您的代码做了一个简单的 fiddle，并在两个输入之间应用了一个事件。第二个输入的调度就像手动一样，因为它是只读的。

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;
                  }

输入更改时 onchange 不会自动工作

onchange doesn't work automatically when an input changes

javascript

onchange

calculation