[Solved][JavaScript] Adding onkeyup event to an array of elements with the same CSS class in a loop

Question

I would like to add an onkeyup event to all input fields with the class ".calculate" which will run the calculateThis() function on every key up.

The tutorials I've read on here and online have all used single elements, such as ones that they get with document.getElementById. But I need it for a group of elements, so I tried doing it with a for loop.

Attempt #1:
var calc = document.getElementsByClassName("calculate");
for (var n = 0; n < calc.length; n++) {
calc[n].addEventListener("keyup", calculateThis);
}

Attempt #2:
var calc = document.getElementsByClassName("calculate");
for (var n = 0; n < calc.length; n++) {
calc[n].onkeyup = function() {
calculateThis();
}
}

I know this can be done by calling the function directly on each input: <input type="text" class="calculate" onkeyup="calculateThis()"> but I'd like to add it through JavaScript if possible.

Any help would be appreciated. Thanks in advance!

Edit: Nevermind, I figured it out :)

Answer 1

If it still does not work. Maybe the problem is that the JS get loaded befor the HTML.

In this case try this:

window.onload = function () {
var calc = document.getElementsByClassName("calculate");

for(let input of calc) {
input.addEventListener("keyup", calculateThis);
}

function calculateThis() {
console.log("success");
}

}

Answer 2

Event delegation

Modularity

Demo for you :

https://code.sololearn.com/Wc3b4508uFJe/?ref=app

Answer 3

Attempt #1 should work.
But you can try the for of loop to.

for(let input of calc) {
input.addEventListener("keyup", calculateThis);
}

Answer 4

how we calculate two or more total

Answer 5

test