用户输入数字时的 Javascript 计算器

发布于 2024-09-24 09:52:00 字数 180 浏览 6 评论 0原文

我是 Javascript 新手，但我正在尝试在我的网站上实现一些功能，用户可以在其中输入数量，并且小计会在他们输入时动态更新。例如：如果每件物品的价格为 10 美元，并且用户在文本字段中键入 5，我希望它在文本框旁边显示 50 美元。非常简单的乘法，但我不知道如何用 Javascript 来做。我认为 onKeyPress 不知何故？谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲欢浪云 2024-10-01 09:52:00

假设以下 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();
};

这是一个工作示例。

Assuming the following 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();
};

Here's a working example.

回复收藏 0 原文

拿命拼未来 2024-10-01 09:52:00

您应该处理“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 属性来设置元素的内容。

You should handle 'onkeyup' and 'onpaste' events to ensure you capture changes by keyboard and via clipboard paste events.

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

Similarly, use getElementById and the element's innerHTML attribute to set the contents of an element when you want to show the result.

回复收藏 0 原文

~没有更多了~