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 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.

• javascript
• html
• html-select
• selectedindex

• Please update your question to include the other select elements and also the JavaScript that declares the select variable. – Scott Marcus Commented Jan 26, 2021 at 13:24
• Also (FYI), price.innerText = select.options[select.selectedIndex].value can just be price.textContent = this.value;. – Scott Marcus Commented Jan 26, 2021 at 13:25
• @ScottMarcus the other select elements are exactly the same, with the same classes and everything. And thank you for that info bro, preciate it. – ameerHarbi Commented Jan 26, 2021 at 13:41

4 Answers 4

You can acplish this by using "event delegation" where you set up just one handler on an element that is a mon 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 mon ancestor of all the select elements
document.body.addEventListener("change", function(event){
  // event.target references the element that actually triggered the event
  // Check to see if the event was triggered by a DOM element you care to handle
  if(event.target.classList.contains("select")){
    // Access the <p> element that is the previous sibling to the 
    // select that triggered the event and update it
    event.target.previousElementSibling.textContent = event.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>

Try this

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

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

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;
  });
}

Maybe this can work for you, in my case I use of this way query selector All

var selects = document.querySelectorAll('select');
        selects.forEach(function(select) {
            select.onchange = function() {
                actualizarBarraProgreso(progressBar, formInputs);
            };
        });