Reset Input Value After Unchecking Box Javascript?

Question

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

Swap items -= -target.value for items -= target.value (remove the unary operation) - you're effectively adding the numbers regardless. e.g. 1 - (-1) is equivalent to 1 + 1 — Emissary
– Emissary, Commented Jun 4, 2022 at 17:59
nah thats there because if I remove it it becomes 100020003000 instead of just 1000 — makerbaker
– makerbaker, Commented Jun 4, 2022 at 18:00
Subtracting a negative number is still adding a positive number. How about subtracting a positive number OR adding a negative number? — seb
– seb, Commented Jun 4, 2022 at 18:03
how does using parseInt vs my method change the result of getting the exact same result of 1000? — makerbaker
– makerbaker, Commented Jun 4, 2022 at 18:04

Lucas Roquilly · Accepted Answer · 2022-06-04 18:10:41Z

3

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

answered Jun 4, 2022 at 18:10

Lucas Roquilly

4063 silver badges10 bronze badges

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

1 Comment

makerbaker Over a year ago

ah I see I added parseInt in the wrong spot

seb · Accepted Answer · 2022-06-04 18:14:59Z

0

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);
  }});

answered Jun 4, 2022 at 18:14

seb

1366 bronze badges

3 Comments

makerbaker Over a year ago

this doesn't work because it doesn't reset the values on uncheck. this was my original code from my question

seb Over a year ago

No, it's not the same. Just try it. jsfiddle.net/z9jw24L7

makerbaker Over a year ago

oh you changed the false target value to a + instead of a -

Collectives™ on Stack Overflow

Reset Input Value After Unchecking Box Javascript?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related