JavaScript - Checkbox loop not totalling up prices correctly

Question

When I click on the checkbox at the top, it puts a '0' in the total box, so I know that it is connected correctly, however I think there is a problem in the logic in the loop. One of the elements in html looks like this.

const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
const checkboxes = document.querySelectorAll('input[data-price][type=checkbox]');
const cbamount = checkboxes.length;

document.getElementsByName('event[]')[0].onclick = function() {
  totalPrice()
};

function totalPrice() {
  let totalprice = 0;
  for (let i = 0; i < cbamount; i++) {
    const box = checkboxes[i];
    if (box.checked) {
      box.dataset.price = totalprice + box.dataset.price;
    } //if
  } //for

  document.getElementsByName("total")[0].value = totalprice;
}

<span class="eventTitle">Carmen </span>
<span class="eventStartDate">2020</span>
<span class="eventEndDate">2020</span>
<span class="catDesc">T</span>
<span class="venueName">Mill </span>
<span class="eventPrice">3</span>
<span class="chosen"><input type="checkbox" name="event[]" value="11" data-price="35.00"></span>


<section id="Cost">
<h3>Total</h3>
	Total <input type="text" name="total" size="20" readonly="">
</section>

"however I think there is a problem in the logic in the loop" - Why do you think so? — Andreas
– Andreas, Commented Jan 1, 2020 at 11:31
Because the total in the box does not change from 0. It makes me think that the total is not getting added up correctly. — cacowa1
– cacowa1, Commented Jan 1, 2020 at 11:32
I am, but its not something that comes up on a debugger, as I am missing something. Is there anything that stands out? — cacowa1
– cacowa1, Commented Jan 1, 2020 at 12:07
You are not adding anything to totalprice. You only update the box.dataset.price. That line should probably be totalprice = totalprice + parseFloat(box.dataset.price); — Gabriele Petrioli
– Gabriele Petrioli, Commented Jan 1, 2020 at 12:28

mplungjan · Accepted Answer · 2020-01-02 12:37:45Z

1

You have no total in the code you provided.

I would personally use ID when only having one element and if more, use relative addressing and/or delegation

const form = document.getElementById('booking');
const total = document.getElementById('total');
document.getElementById("booking").addEventListener("click", function(e) {
  if (e.target.name === "event[]") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      } //if
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

<form id="booking" method="get">
  <section id="book">
    <h2>Select Events</h2>

    <div class="item">
      <span class="eventTitle">Carmen </span>
      <span class="eventStartDate">2020</span>
      <span class="eventEndDate">2020</span>
      <span class="catDesc">T</span>
      <span class="venueName">Mill </span>
      <span class="eventPrice">3</span>
      <span class="chosen"><input name="event[]" type="checkbox" value="11" data-price="35.00"></span>
    </div>
    <div class="item">
      <span class="eventTitle">Ash</span>
      <span class="eventStartDate">202</span>
      <span class="eventEnd">2020-12-31</span>
      <span class="catD">Exhib</span>
      <span class="venueNa">The Biy</span>
      <span class="eventPr">0.00</span>
      <span class="chosen"><input type="checkbox" name="event[]" value="17" data-price="10.00"></span>
    </div>
  </section>

  <section id="Cost">
    <h3>Total</h3>
    Total <input type="text" name="total" size="20" readonly="">
  </section>
</form>

edited Jan 2, 2020 at 12:37

answered Jan 1, 2020 at 12:32

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

16 Comments

cacowa1 Over a year ago

This is the functionality that I want, however on my site it does not update the text box. It remains empty and the console logs no errors. I appreciate the help, but I still cant get it to work.

mplungjan Over a year ago

Please post more HTML

cacowa1 Over a year ago

Il put it in the original post.

mplungjan Over a year ago

@ccowan1 Please do

mplungjan Over a year ago

No need to create a new thread. I can still update my answer here

|

Collectives™ on Stack Overflow

JavaScript - Checkbox loop not totalling up prices correctly

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related