Count elements with jQuery and CSS selectors

Question

I have 8 buttons and I want to calculate the total of them for each button with the class active .

I tried the code below but is not working well. Can anyone help me to solve it this problem?

 // Show Price function showPrice() { price = 0; btn1 = document.querySelector("#btn1"); btn2 = document.querySelector("#btn20"); btn3 = document.querySelector("#btn6"); btn4 = document.querySelector("#btn-book-20"); btn5 = document.querySelector("#btn-book-6"); btn6 = document.querySelector("#btn-book-12"); btn7 = document.querySelector("#btn-book-13"); if (btn1.getAttribute("class") == "active") { ele = document.querySelector("span #price").firstChild.textContent; price = price + Number(ele); } else if (btn2.getAttribute("class") == "active") { ele = document.querySelector("span #price2").firstChild.textContent; price = price + Number(ele); } else if (btn3.getAttribute("class") == "active") { ele = document.querySelector("span #price3").firstChild.textContent; price = price + Number(ele); } else if (btn4.getAttribute("class") == "active") { ele = document.querySelector("span #price4").firstChild.textContent; price = price + Number(ele); } else if (btn5.getAttribute("class") == "active") { ele = document.querySelector("span #price5").firstChild.textContent; price = price + Number(ele); } else if (btn6.getAttribute("class") == "active") { ele = document.querySelector("span #price6").firstChild.textContent; price = price + Number(ele); } else if (btn7.getAttribute("class") == "active") { ele = document.querySelector("span #price7").firstChild.textContent; price = price + Number(ele); } $("#amountInDollars").html(price); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="active" type="button" id="btn1"> <div> <span class="lg:text-base text-xs"> <p>Items 1</p> <br> <p id="users-number"></p> <span id="price">10</span> </span> </div> </button> <button class="desactivate" type="button" id="btn20"> <div> <span class="lg:text-base text-xs"> <p>Items 2</p> <br> <p id="users-number"></p> <span id="price2">20</span> </span> </div> </button> <button class="desactivate" type="button" id="btn6"> <div> <span class="lg:text-base text-xs"> <p>Items 3</p> <br> <p id="users-number"></p> <span id="price3">19</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-6"> <div> <span class="lg:text-base text-xs"> <p>Items 4</p> <br> <p id="users-number"></p> <span id="price4">13</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-20"> <div> <span class="lg:text-base text-xs"> <p>Items 5</p> <br> <p id="users-number"></p> <span id="price5">14</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-12"> <div> <span class="lg:text-base text-xs"> <p>Items 6</p> <br> <p id="users-number"></p> <span id="price6">16</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-13"> <div> <span class="lg:text-base text-xs"> <p>Items 7</p> <br> <p id="users-number"></p> <span id="price7">12</span> </span> </div> </button> <span id="amountInDollars"></span> ```

Answer 1

As your code shows you are using jQuery ( $("#amountInDollars").html(...) ), I'll give an example using jQuery as it seems to be loaded anyway. I've added a click handler to the buttons so when they are clicked the classes active and desactivate will be toggled, so you may select which element is active just by clicking it. You may remove this handler if you don't need it, it's just to make the example more dynamic. Active buttons have yellow background.

Edited regarding the notes bellow ie check for no button selected and a missing price.

 function showPrice() { var a = $('button.active').map((i,x) => $(x).find('span[id^=price]').first().text()).toArray(); var total = 0; if (a.length) total = a.reduce((p, n) => Number(p) + Number(n)); $("#amountInDollars").html(total); } // DOM ready for your actions $(function() { $('button').on('click', function() { $(this).toggleClass('active').toggleClass('desactivate'); showPrice(); }); showPrice(); });

 .active{background-color:yellow}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="active" type="button" id="btn1"> <div> <span class="lg:text-base text-xs"> <p>Items 1</p> <br> <p id="users-number"></p> <span id="price">10</span> </span> </div> </button> <button class="desactivate" type="button" id="btn20"> <div> <span class="lg:text-base text-xs"> <p>Items 2</p> <br> <p id="users-number"></p> <span id="price2">20</span> </span> </div> </button> <button class="desactivate" type="button" id="btn6"> <div> <span class="lg:text-base text-xs"> <p>Items 3</p> <br> <p id="users-number"></p> <span id="price3">19</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-6"> <div> <span class="lg:text-base text-xs"> <p>Items 4</p> <br> <p id="users-number"></p> <span id="price4">13</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-20"> <div> <span class="lg:text-base text-xs"> <p>Items 5</p> <br> <p id="users-number"></p> <span id="price5">14</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-12"> <div> <span class="lg:text-base text-xs"> <p>Items 6</p> <br> <p id="users-number"></p> <span id="price6">16</span> </span> </div> </button> <button class="active" type="button" id="btn-book-13"> <div> <span class="lg:text-base text-xs"> <p>Items 7</p> <br> <p id="users-number"></p> <span id="price7">12</span> </span> </div> </button> <span id="amountInDollars"></span>

Answer 2

Firstable I see no purpose for adding class name desactivate cause each non active button is desactive by natural, the price span element should have a class name price only instead of ids, and you can use event delegation to do these type of things, and you could use divs instead of buttons, but I didn't modify the rest of your HTML it's up to you, happy coding ;).

Edited: added button click canceling feature

 let total = 0; document.querySelector("#buttons").onclick = function(e) { // because you have elements inside of your button! so we count all the clicks on the button no matter what element is targeted let targetButton = e.target.closest("button"); if(targetButton) { let price = targetButton.querySelector(".price").textContent; // if the button is active then desactivate it and subtract the price from the total, else set the button as active and add the price to the total if(targetButton.className.includes("active")) { // set the button to inactive state targetButton.classList.remove("active"); total -= price; }else { // set the button to active state targetButton.classList.add("active"); total += Number(price); } // update the total amount element's content document.querySelector("#amountInDollars").textContent = total; } };

 .active { color: blue; }

 <div id="buttons"> <button type="button" id="btn1"> <div> <span class="lg:text-base text-xs"> <p>Items 1</p> <br> <p id="users-number"></p> <span class="price">10</span> </span> </div> </button> <button type="button" id="btn20"> <div> <span class="lg:text-base text-xs"> <p>Items 2</p> <br> <p id="users-number"></p> <span class="price">20</span> </span> </div> </button> <button type="button" id="btn6"> <div> <span class="lg:text-base text-xs"> <p>Items 3</p> <br> <p id="users-number"></p> <span class="price">19</span> </span> </div> </button> <button type="button" id="btn-book-6"> <div> <span class="lg:text-base text-xs"> <p>Items 4</p> <br> <p id="users-number"></p> <span class="price">13</span> </span> </div> </button> <button type="button" id="btn-book-20"> <div> <span class="lg:text-base text-xs"> <p>Items 5</p> <br> <p id="users-number"></p> <span class="price">14</span> </span> </div> </button> <button type="button" id="btn-book-12"> <div> <span class="lg:text-base text-xs"> <p>Items 6</p> <br> <p id="users-number"></p> <span class="price">16</span> </span> </div> </button> <button type="button" id="btn-book-13"> <div> <span class="lg:text-base text-xs"> <p>Items 7</p> <br> <p id="users-number"></p> <span class="price">12</span> </span> </div> </button> </div> <br> <span id="amountInDollars">0</span>