make the input value change without clicking button-CodePudding

I'm trying to make it give me the value that I put in at "summe:" when changing the numbers without actually clicking the calc button how do I do that? I tried with onchange but I cant figure out how to do it

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>

CodePudding user response：

Add an input handler. Change event only triggers when the element has lost focus.

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

From MDN

CodePudding user response：

Use querySelectorAll to get references to both fields. And then forEach to apply event listener to both. Also as any points out the event you are looking for is change.

const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
const backend = document.querySelector('.backenduser');
const updateOnChange = document.querySelectorAll('.update-on-change');

updateOnChange.forEach(input => {
  input.addEventListener('change', 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 update-on-change'></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 update-on-change'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>