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属性来设置元素的内容。