title: HTML, Vanilla JS - Multiple oninput handlers for the same input fields
body: <p>I'm developing a calculator in Javascript.</p>
  
  <p>I have multiple inputs with the same class that share a common behavior when "oninput" is triggered:</p>
  
  <pre><code>let sliders = document.getElementsByClassName('slider');
  for(let i = 0; i &lt; sliders.length; i++) {
      sliders.item(i).oninput = function() {
          let txtValue = this.getAttribute('id') + 'Text'; //The Input field that will display the numeric value of the slider
  
          element(txtValue).value = (element(txtValue).getAttribute('format') == 'currency') ?
          formatNumber(this.value, 0) : this.value;
      };
  } 
  </code></pre>
  
  <p>The sliders "oninput" event updates the text-boxes below them with the user friendly values
  <a href="https://i.stack.imgur.com/X8WAP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X8WAP.png" alt=""></a></p>
  
  <p>BUT, my problem is, outside that I need a separate oninput listener for the Down Payment slider, because I also want to update the percentage shown to the right, so, when I try to add a new line of code like this:</p>
  
  <pre><code>element('downPayment').oninput = function() {
      element('downPaymentPercentageText').value = (element('downPayment').value / element('loanAmount').value) * 100;
  }
  </code></pre>
  
  <p>It just doesn´t work, any idea how can I listen twice to the "oninput" to trigger two trigger these two different handlers?</p>