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不会自动运行

3 个答案: