Reset Input Value After Unchecking Box Javascript?

user_19059575 0
Viewed 29

Here is my JS code

let items = 0;

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked) {
    parseInt(items)
    items += target.value;
    console.log("I clicked the item", items);
  } else if (target.className === "food" && !target.checked) {
    parseInt(items)
    items -= target.value;
    console.log("i unclicked", items);
  })}

HTML Input

 <input type="checkbox" name="item1" value="1000" class="food">
 <input type="checkbox" name="item2" value="2000" class="food">

Right now when I click a checkbox it will add 1000, then when I uncheck it to turns to 2000, then checking again it becomes 3000, and basically just keeps adding them regardless if I check or uncheck

How do I reset the value when I uncheck my input?

Update: I added parseInt and it shows 01000 when I click my checkbox, but when I uncheck it becomes 0. However, if I click 1 checkbox, then another it will add it like 10002000 instead of doing 3000

addeventlistener events javascript
2 Answers

I think this is what you are looking for.

let items = 0;

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked) {
    items += parseInt(target.value);
    console.log("I clicked the item", items);
  } else if (target.className === "food" && !target.checked) {
    items -= parseInt(target.value);
    console.log("i unclicked", items);
  }})
 <input type="checkbox" name="item1" value="1000" class="food">
 <input type="checkbox" name="item2" value="2000" class="food">

user_165950200

Alternatively without the parseInt:

let items = 0;

document.addEventListener("click", ( {target} ) => {
  if (target.className === "food" && target.checked === true) {
    items += +target.value;
    console.log("I clicked the item", items);
  } else if (target.className === "food" && target.checked === false) {
    items -= +target.value;
    console.log("i unclicked", items);
  }});
user_192267240
Related