Javascript計算器作為用戶鍵入數字

Question

我是Javascript的菜鳥，但我正在嘗試在我的網站上實現一些用戶可以輸入數量的內容，並且小計在輸入時動態更新。 例如：如果項目每個10美元，而用戶在文本字段中鍵入5，我希望它在文本框旁邊顯示50美元。 非常簡單的乘法，但我不知道如何使用Javascript。 我想onKeyPress不知何故？ 謝謝！

Answer 1

假設以下HTML：

<input type="text" id="numberField"/>
<span id="result"></span>

JavaScript的：

window.onload = function() {
   var base = 10;
   var numberField = document.getElementById('numberField');
   numberField.onkeyup = numberField.onpaste = function() {
      if(this.value.length == 0) {
         document.getElementById('result').innerHTML = '';
         return;
      }
      var number = parseInt(this.value);
      if(isNaN(number)) return;
      document.getElementById('result').innerHTML = number * base;
   };
   numberField.onkeyup(); //could just as easily have been onpaste();
};

這是一個有效的例子 。

Answer 2

您應該處理'onkeyup'和'onpaste'事件，以確保您通過鍵盤和剪貼板粘貼事件捕獲更改。

<input id='myinput' />
<script>
  var myinput = document.getElementById('myinput');
  function changeHandler() {
    // here, you can access the input value with 'myinput.value' or 'this.value'
  }
  myinput.onkeyup = myinput.onpaste = changeHandler;
</script>

類似地，當您想要顯示結果時，使用getElementById和元素的innerHTML屬性來設置元素的內容。