When I click on the button, the value of that button needs to add up to sum

Question

I was trying to code a POS like system as a small project to learn with. So currently I have two buttons "cola" and "fanta". The prices of those drinks are in an object. As soon as I click on one button the price needs to be added to sum. Well what the code is currently doing is to add up the prices of the same product. So if I click three times in a row on "cola", which has a price of 3, I get 9 as sum. So far so good, but as soon as I click fanta, which has a price of 2, I get a sum of 2. But when I continue with the cola button it continues at 12 and so on.

Here is the code:

  const btnChoose = document.querySelectorAll(".btn");

  const drinks= {
    cola: 4,
    fanta: 3,
  };

  for (let i = 0; i < btnChoose.length; i++) {
    let sum = null;
    btnChoose[i].addEventListener("click", function () {
      let price = drinks[this.id];
      sum += price;
      console.log(typeof sum, sum);
    });
  }

and here is the HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>POS</title>
  </head>

  <body>
    <button class="btn" id="cola">Cola</button>
    <button class="btn" id="fanta">Fanta</button>
    <script>
     ....
    </script>
  </body>
</html>

score 1 · Answer 1 · answered Feb 08 '22 at 11:49

Your let sum=null statement creates a separate locally scoped variable each pass through the for loop. Simply move the statement outside the for loop to then have only one sum variable.

  let sum=null;
  for (let i = 0; i < btnChoose.length; i++) {

fiddle here: https://jsfiddle.net/cLrao8fu/

score 1 · Answer 2 · answered Feb 08 '22 at 11:50

Sum is product wise because you have declared the variable sum inside the loop. If you move it outside of the loop like below you should get a sum which incorporates sum of all product values.

let sum = 0;
for (let i = 0; i < btnChoose.length; i++) {
    let price = 0;
    btnChoose[i].addEventListener("click", function () {
      price = drinks[this.id];
      sum += price;
      console.log(typeof sum, sum);
    });
  }

score 0 · Answer 3 · answered Feb 08 '22 at 11:51

its because you are defining sum in the loop define it outside of the loop:

const btnChoose = document.querySelectorAll(".btn");

  const drinks= {
    cola: 4,
    fanta: 3,
  };

  let sum = null;

  for (let i = 0; i < btnChoose.length; i++) {
    btnChoose[i].addEventListener("click", function () {
      let price = drinks[this.id];
      sum += price;
      console.log(typeof sum, sum);
    });
  }

score 0 · Answer 4 · answered Feb 08 '22 at 11:53

that is because you are declaring the variable "sum" inside the loop, so each one will get a unique "sum". What you need to do is to have them both share 1 variable "sum", so intead of this:

  const btnChoose = document.querySelectorAll(".btn");

  const drinks= {
    cola: 4,
    fanta: 3,
  };

  for (let i = 0; i < btnChoose.length; i++) {
    let sum = null;
    btnChoose[i].addEventListener("click", function () {
      let price = drinks[this.id];
      sum += price;
      console.log(typeof sum, sum);
    });
  }

do this:

  const btnChoose = document.querySelectorAll(".btn");

  const drinks= {
    cola: 4,
    fanta: 3,
  };
  let sum = null; // moved it up here
  for (let i = 0; i < btnChoose.length; i++) {
    // moved it away from here
    btnChoose[i].addEventListener("click", function () {
      let price = drinks[this.id];
      sum += price;
      console.log(typeof sum, sum);
    });
  }

score 0 · Answer 5 · edited Feb 09 '22 at 13:16

0

Try this:

let sum = 0;
const btnChoose = document.querySelectorAll(".btn");

const drinks = {
  cola: 4,
  fanta: 3,
};

for (let i = 0; i < btnChoose.length; i++) {
  btnChoose[i].addEventListener("click", function() {
    let price = drinks[this.id];
    sum += price;
    console.log(typeof sum, sum);
  });
}

edited Feb 09 '22 at 13:16

Mike

1,080
1
9
25

answered Feb 08 '22 at 12:11

Vinit Kasture

16
3

When I click on the button, the value of that button needs to add up to sum

5 Answers5