无需单击按钮即可更改输入值答案

【问题标题】：make the input value change without clicking button无需单击按钮即可更改输入值
【发布时间】：2022-07-06 21:37:06
【问题描述】：

我试图让它给我在“summe:”中输入的值，当更改数字而不实际单击 calc 按钮时，我该怎么做？我试过onchange，但我不知道该怎么做

const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
const backend = document.querySelector('.backenduser');

backend.addEventListener('onchange', function() {
  var backendanzahl = document.getElementsByClassName("backenduser")[0].value;

  var appanzahl = document.getElementsByClassName("appuser")[0].value;
  var mytext = "Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5);
  summetext.textContent = mytext;
});

App-Benutzer: <input type="number" placeholder="1-100" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser'></input><br> Backendbenutzer: <input type="number" placeholder="1-15" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)"
  class='backenduser'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>

【问题讨论】：

不是onchange - 只是change 或者input（它们的工作方式略有不同）。也可以在回调中使用querySelector 而不是getElementsByClassName，因为您熟悉它的工作原理。

标签： javascript html

【解决方案1】：

添加一个input 处理程序。仅当元素失去焦点时才会触发更改事件。

element.addEventListener('input', function (evt) {
    //do your stuff here
});

From MDN

【讨论】：