将 javascript 应用于多个 div

Question

I Have JavaScript/HTML code like this:

 const priceDiv = document.querySelector('#pprices'); priceDiv.textContent = (+priceDiv.textContent).toLocaleString('en-US');

 <div id="pprices">125135135</div> <div id="pprices">1361436136</div> <div id="pprices">136136136136</div>

The problem is that the JavaScript Code affects the first div only.

How can I solve this problem?

Answer 1

1. IDs should be unique. Use class instead.
2. querySelector returns the first matching element. Use querySelectorAll instead.
3. querySelectorAll returns a NodeList object so use the forEach method to loop through the list.

 const priceDiv = document.querySelectorAll('.pprices'); priceDiv.forEach(e => { e.textContent = (+e.textContent).toLocaleString('en-US'); })

 <div class="pprices">125135135</div> <div class="pprices">1361436136</div> <div class="pprices">136136136136</div>

Answer 2

You need querySelectorAll with class instead of ids and forEach for pass all elements

 const priceDivs = document.querySelectorAll('.pprices'); priceDivs.forEach(function (priceDiv) { priceDiv.textContent = (+priceDiv.textContent).toLocaleString('en-US'); });

 <div class="pprices">125135135</div> <div class="pprices">1361436136</div> <div class="pprices">136136136136</div>