Adding event listener to multiple select elements in js

Question

I have different select elements for changing the size of different products, each size has a different price. I can do it with one select element using querySelector but it won't work with querySelectorAll.

Here's my code for changing only one select element:

 const price = document.querySelector(".price"); const select = document.querySelector(".select"); select.addEventListener("change", () => { price.innerText = select.options[select.selectedIndex].value; });

 <div> <p class="price">$15</p> <select class="select"> <option disabled hidden selected>size</option> <option value="$20">40cmx40cm</option> <option value="$30">30cmx40cm</option> <option value="$50">50cmx50cm</option> </select> </div>

I've tried for loops and forEach but nothing worked (probably cause i'm doing it wrong). Any help would be appreciated. I'm losing my mind.

Answer 1

Try this

const selects = document.querySelectorAll('.selects');

 selects.forEach(el => el.addEventListener('click', event => { 
    //add you code
     }));

Answer 2

I think you can do the following thing:

selects = document.querySelectorAll(".select");
prices = document.querySelectorAll(".price");
for(let index = 0; index < selects.length; index+=1){
  selects[index].addEventListener("change", () => {
    prices[index].innerText = selects[index].options[selects[index].selectedIndex].value;
  });
}

Answer 3

You can accomplish this by using " event delegation " where you set up just one handler on an element that is a common ancestor to all the select elements you wish to handle events on. The event will originate at the select but not be handled there and will "bubble" up to the ancestor you choose. Then you handle the event at that ancestor and use the event.target that will be accessible in the handler to reference the actual element that triggered the event and relative DOM references to reference the p element you need to update.

The benefit here is that you only set up one handler (which saves on memory and performance) and the code is simplified. Also, you can add new select structures without having to alter the handling code at all.

 // Set up a single handler at a common ancestor of all the select elements document.body.addEventListener("change", function(event){ // event.target references the element that actually triggered the event let target = event.target; // Check to see if the event was triggered by a DOM element // you care to handle if(target.classList.contains("select")){ // Access the <p> element that is the previous sibling to the // select that triggered the event and update it target.previousElementSibling.textContent = target.value } });

 <div> <p class="price">$15</p> <select class="select"> <option disabled hidden selected>size</option> <option value="$20">40cmx40cm</option> <option value="$30">30cmx40cm</option> <option value="$50">50cmx50cm</option> </select> </div> <div> <p class="price">$15</p> <select class="select"> <option disabled hidden selected>size</option> <option value="$20">40cmx40cm</option> <option value="$30">30cmx40cm</option> <option value="$50">50cmx50cm</option> </select> </div> <div> <p class="price">$15</p> <select class="select"> <option disabled hidden selected>size</option> <option value="$20">40cmx40cm</option> <option value="$30">30cmx40cm</option> <option value="$50">50cmx50cm</option> </select> </div>

Answer 4

Simple Solution

You can use this version which works fine.

 let price = document.querySelector(".price"); let select = document.getElementsByClassName("select"); let i; for (i = 0; i < select.length; i++) { select[i].addEventListener('change', (self) => { let el = self.target; let value = el.options[el.selectedIndex].value; price.innerText = value; }); }

 <div> <p class="price">$15</p> <select class="select"> <option disabled hidden selected>size</option> <option value="$201">40cmx40cm</option> <option value="$301">30cmx40cm</option> <option value="$501">50cmx50cm</option> </select> <select class="select"> <option disabled hidden selected>size</option> <option value="$202">40cmx40cm</option> <option value="$302">30cmx40cm</option> <option value="$502">50cmx50cm</option> </select> <select class="select"> <option disabled hidden selected>size</option> <option value="$203">40cmx40cm</option> <option value="$303">30cmx40cm</option> <option value="$503">50cmx50cm</option> </select> </div>