javascript adding and subtracting using input type checkbox

Question

I have code that works but was wondering if there is a way to condense it with JS loops? I tried but I'm have trouble with it. I'm trying to build a calculator webpage for a game I plan on playing. The "hide" is a material item for the skinning activity in the game. I am anticipating that there will be several material items. Thanks!

total = 0;
hide1 = 1;
hide2 = 1;
hide3 = 1;

function addUp(num, x) {
  if (x == "hide1" && hide1 == 1) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo + numo;
    document.theForm.ttl.value = nwTemp;
    hide1 = 0;
    return hide1;
  }
  if (x == "hide1" && hide1 == 0) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo - numo;
    document.theForm.ttl.value = nwTemp;
    hide1 = 1;
  }
  if (x == "hide2" && hide2 == 1) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo + numo;
    document.theForm.ttl.value = nwTemp;
    hide2 = 0;
    return hide2;
  }
  if (x == "hide2" && hide2 == 0) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo - numo;
    document.theForm.ttl.value = nwTemp;
    hide2 = 1;
  }
  if (x == "hide3" && hide3 == 1) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo + numo;
    document.theForm.ttl.value = nwTemp;
    hide3 = 0;
    return hide3;
  }
  if (x == "hide3" && hide3 == 0) {
    temp = document.theForm.ttl.value;
    tempo = parseInt(temp);
    numo = parseInt(num);
    nwTemp = tempo - numo;
    document.theForm.ttl.value = nwTemp;
    hide3 = 1;
  }
}

<form name="theForm" style="display:block;border:1px">
  <div id="t1" style="display:none;">
    <input type="checkbox" onclick="addUp(4, 'hide1')">
Beginner's Leather Hood
    <br/>
    <input type="checkbox" onClick="addUp(8, 'hide2')">
Beginner's Leather Armor
    <br/>
    <input type="checkbox" onClick="addUp(4, 'hide3')">
Beginner's Leather Shoes
    <br/>
  </div>
  <div id="t2" style="display:none;">
    <input type="checkbox" onclick="addUp(8, 'hide4')">
Novice's Leather Hood
    <br/>
    <input type="checkbox" onClick="addUp(16, 'hide5')">
Novice's Leather Armor
    <br/>
    <input type="checkbox" onClick="addUp(8, 'hide6')">
Novice's Leather Shoes
    <br/>
  </div>
  Total Number:
  <input type="text" name="ttl" value=0>
</form>

I don't understand how the hide1, hide2, hide3 variables are used to show/hide things, can you add an explanation of that? — Patrick Steadman
– Patrick Steadman, Commented Nov 15, 2015 at 22:38
Could you maybe also explain what you are trying to achieve with this? — Sean_A91
– Sean_A91, Commented Nov 15, 2015 at 22:48

Patrick Steadman · Accepted Answer · 2015-11-15 22:40:19Z

1

I would consider looking at data-* attributes and event listeners. You could have a data attribute for the value of each checkbox, and then an event listener for the change event of the checkbox.

answered Nov 15, 2015 at 22:40

Patrick Steadman

7487 silver badges13 bronze badges

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

Comments

Elentriel · Accepted Answer · 2015-11-15 22:39:58Z

0

This works for you?

total = 0;
var hide = [];
hide[1] = 1;
hide[2] = 1;
hide[3] = 1;

function addUp(num, x) {
    var index = parseInt(x.replace("hide",""));
    if(hide[index] == 1)
    {
        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo + numo;
        document.theForm.ttl.value = nwTemp;
        hide[index] = 0;
        return hide[index];
    }
    else if(hide[index] == 0)
    {
        temp = document.theForm.ttl.value;
        tempo = parseInt(temp);
        numo = parseInt(num);
        nwTemp = tempo - numo;
        document.theForm.ttl.value = nwTemp;
        hide[index] = 1;
    }

}

answered Nov 15, 2015 at 22:39

Elentriel

1,2378 silver badges21 bronze badges

1 Comment

Alexandria Velez-Young Over a year ago

Thank you, @Elentriel! This is exactly what I was looking for. You just saved me a whole lot of headaches.

Collectives™ on Stack Overflow

javascript adding and subtracting using input type checkbox

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related