HTML, Vanilla JS - Multiple oninput handlers for the same input fields [duplicate]

Question

I'm developing a calculator in Javascript.

I have multiple inputs with the same class that share a common behavior when "oninput" is triggered:

let sliders = document.getElementsByClassName('slider');
for(let i = 0; i < 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;
    };
}

The sliders "oninput" event updates the text-boxes below them with the user friendly values

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:

element('downPayment').oninput = function() {
    element('downPaymentPercentageText').value = (element('downPayment').value / element('loanAmount').value) * 100;
}

It just doesn´t work, any idea how can I listen twice to the "oninput" to trigger two trigger these two different handlers?

you can just have another function and call it inside the event listener, you can even have it called/run based on condition. — ROOT
– ROOT, Commented Apr 12, 2020 at 13:38

Cameron Little · Accepted Answer · 2020-04-12 13:38:18Z

3

Replace your oninput = handler with addEventListener('input', handler). Read more about addEventListener on MDN, but you can attach as many handlers as you'd like.

element('downPayment').addEventListener('input', function() {
    element('downPaymentPercentageText').value = (element('downPayment').value / element('loanAmount').value) * 100;
})

answered Apr 12, 2020 at 13:38

Cameron Little

3,78627 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JuanBonnett Over a year ago

Thank you! How could I not think about it!

Collectives™ on Stack Overflow

HTML, Vanilla JS - Multiple oninput handlers for the same input fields [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related