Count elements with jQuery and CSS selectors-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>