Question

我在这里遇到了一些问题.. 我有一个输入应该乘以3没有按钮

这是我的代码

    <input type="number" placeholder="Input a number" id="number"
     onclick="multiply()">

    <div id="result"></div>

这是我的剧本

    <script>
       function multiply(){
          var num = document.getElementById('number').value;
          var res = document.getElementById('result').innerHTML;

          res = num * 3;

       }
    </script>

所以我希望用户可以输入数字并立即获得结果而无需按钮..

谢谢..

（初级程序员）

Answer 1

删除内联onclick处理程序并订阅input事件;

var res = document.getElementById('result');

document.getElementById('number').addEventListener('input', function() {
    res.textContent = this.value * 3;
}, false);

var res = document.getElementById('result');

document.getElementById('number').addEventListener('input', function() {
  res.innerHTML = this.value * 3;
}, false);

<input type="number" placeholder="Input a number" id="number">

<div id="result"></div>

Answer 2

使用onChange功能。

当更改元素的值时会发生onchange事件。

对于单选按钮和复选框，当更改检查状态时会发生onchange事件。

- w3schools

例如

document.querySelector("#number").addEventListener("change", function () {
      var num = document.querySelector("#number").value;
      document.querySelector('#result').innerHTML;

      document.querySelector('#result').innerHTML = num * 3;
});

没有按钮点击的Javascript触发器

2 个答案: