Onchange 大量输入 JS vanilla

Question

I have multiple inputs on my website. The inputs created with createElement . I can give every input class, id and etc.

My goal: every time the user inserts new input (amount of products) it will calculate the overall price without any click, just automatic calculation(object price * amount in the input).

I would post the code, but I think image will explain it better:

How can I do the onchagne with getElementByTagName . Example will be grate. Thank you !

Answer 1

You can use event delegation. Several events -- like "change" -- on your input elements will bubble up to container elements, up to the root of the DOM. So identify which is the common ancestor element, and listen there for the event you are interested in. I will choose the "input" event, as it triggers on any change the user makes, via any way of input:

document.addEventListener("input", function() {
    // make calculation here:
});

This way you only need to attach one listener.

Answer 2

You can do something like this

function changeHandler() {
  // on change handler
}
const inputs = [...document.getElementsByTagName('input')];
inputs.forEach(input => input.addEventListener('click', changeHandler));

Answer 3

You can do this with classes, which is better than applying your job to all your inputs. I hope is something like this do you need :

 function addInputListener(input) { //@todo Replace this by your data let row = input.parentElement.parentElement; let overallPriceElement = row.querySelector('.overall-price'); let price = parseInt(row.querySelector('.price').innerText); let calcEvent = function() { //@todo Put your calc function here if (this.value > 0) { overallPriceElement.innerText = (price * this.value).toString(); } else { overallPriceElement.innerText = "No products yet"; } }; input.addEventListener('input', calcEvent); calcEvent.call(input); // call() is here to add input context } // It's better to use class instead tag to do your job let inputs = document.querySelectorAll('.amount'); // But you can also use tag do this //let inputs = document.querySelectorAll('input'); for (let i = 0; i < inputs.length; i++) { let input = inputs[i]; addInputListener(input); }

 <table> <thead> <tr> <th>#</th> <th>Name</th> <th>Price</th> <th>Amount</th> <th>Overall Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bread</td> <td class="price">3</td> <td><input type="number" class="amount"></td> <td class="overall-price"></td> </tr> <tr> <td>2</td> <td>Bread</td> <td class="price">10</td> <td><input type="number" class="amount"></td> <td class="overall-price"></td> </tr> <tr> <td>3</td> <td>Bread</td> <td class="price">30</td> <td><input type="number" class="amount"></td> <td class="overall-price"></td> </tr> </tbody> </table>

You can call function addInputListener(input) each time you create new row pass directly your new input created by createElement to add these listeners.