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

If you want to calculate total of all items that has the class active then you should use only if for all the conditions. Here you are using if() else if(). So if the condition if matches then it wont execute the else if other conditions — kumaran
– kumaran, Commented Oct 28, 2021 at 8:43

Reflective · Accepted Answer · 2021-10-28 09:50:50Z

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

edited Oct 28, 2021 at 9:50

answered Oct 28, 2021 at 9:32

Reflective

3,9371 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reflective Over a year ago

Well, that wasn't required in the OP question so I've assumed that elements will always have price, but I'll correct the code to support your note i.e. instead of parseInt I'll put Number as Number('') will return 0 and .text() is returning a string. That's first. And second, I'll check for an empty array.

Saadi Toumi Fouad Over a year ago

You are welcome, you can delete the comments

Reflective Over a year ago

No need of deleting, you've made a good note.

Nimantha · Accepted Answer · 2021-10-29 08:04:22Z

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.

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>

Collectives™ on Stack Overflow

Count elements with jQuery and CSS selectors

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related