Add value to JavaScript variable when checkbox is checked

Question

This is the simple app for calculating the total price of selected elements of computer hardware. It should work with innerHTML and change it dinamically.

The problem is that with my code, nothing happens, so you can check it on my fiddle or just look at the code below. It should change the price in the last box???

FIDDLE

Code:

<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;">
<tr style="background-color:#f0f0f0;">
  <th style="width:200px;text-align:left;">Elements</th>
  <th align="center"></th>      
</tr>
<tr style="border-bottom:1px solid #a3a3a3;">
  <td>CPU unit</td>
  <td align="center">&#10003;</td>      
  </tr>
<tr>
<tr>
  <td>Motherboard</td>
  <td align="center">&#10003;</td>      
  </tr>
  <td>Graphic card</td>
  <td align="center"><input type="checkbox" id="id_1" value="25" onchange="check();"></td>      
</tr>
<tr>
  <td>Memory chip</td>
  <td align="center"><input type="checkbox" name="" value="" onchange="check();></td>       
</tr>
<tr>
  <td>Monitor</td>
  <td align="center"><input type="checkbox" name="" value="" onchange="check();></td>       
</tr>
</table>

<table style="width:220px;padding:1px;border:1px solid #f0f0f0;font-size:22px; font-weight:bold;">
<tr style="border-bottom:1px solid #a3a3a3;text-align:center;background-color:#80CCDC">

<td id="total"><script>document.getElementById('total').innerHTML = price;</script></td></tr><tr>
</table>

JAVASCRIPT

var basic = 300;
var add = 0;

function check()
  {
      if(document.getElementById("id_1").checked) {
    add = 120;
  }
      if(document.getElementById("id_1").checked) {
    add = 40;
  }
      if(document.getElementById("id_1").checked) {
    add = 90;
  }

 }
var p = basic + add;
var price = p + " &euro;";

You're almost there. There's no reason why your script (the one for updating the price in the html) would run more than once. — adrichman
– adrichman, Commented Apr 16, 2014 at 23:24
I updated the fiddle, but still I am not having the solution... Can you update it somehow? — user3543284
– user3543284, Commented Apr 16, 2014 at 23:31

Ruan Mendes · Accepted Answer · 2014-04-17 00:07:44Z

There are a few problems

You need to call document.getElementById('total').innerHTML = price; inside check so that it updates when you click the checkbox;
You can't have multiple items with the same ID. I changed them to id_1, id_2, id_3
You need to add to the existing value in the add variable
You have to hookup change for all the checkboxes, not just the first one.

Change your code to the following http://jsfiddle.net/mendesjuan/3ja4X/3/

function check() {
  var basic = 300;
  var add = 0;  
  if(document.getElementById("id_1").checked) {
    add += 120;
  }
  if(document.getElementById("id_2").checked) {
    add += 40;
  }
  if(document.getElementById("id_3").checked) {
    add += 90;
  }
  var p = basic + add;
  var price = p + " &euro;"; 
  document.getElementById('total').innerHTML = price;  
 }

check();

For even cleaner code, you can use the following http://jsfiddle.net/mendesjuan/3ja4X/4/

function updateTotal(){
    var basic = 300;
    var add = 0;
    var form = document.getElementById('form');
    // Store the value for each item in the checkbox so
    // you don't need to have three separate `if`s  and IDs for them.
    var checkboxes = form.getElementsByClassName('addon');   
    for (var i=0; i < checkboxes.length; i ++) {
       if (checkboxes[i].checked) {
           add += parseInt(checkboxes[i].value, 10);
       }
    }
    var p = basic + add;
    var price = p + " &euro;"; 
    document.getElementById('total').innerHTML = price;  
}
// Hookup handlers from JS, not in the HTML from a single 
// place using event delegation
document.getElementById('form').addEventListener('change', updateTotal);

Ibu · Accepted Answer · 2014-04-16 23:31:50Z

1

Add your calculations inside the check function, or make it calculate after the numbers are added:

function check(){
    if(document.getElementById("id_1").checked) {
        add = 120;
    }
    if(document.getElementById("id_1").checked) {
        add = 40;
    }
    if(document.getElementById("id_1").checked) {
        add = 90;
    }
    var p = basic + add;
    var price = p + " &euro;"; 
    document.getElementById('total').innerHTML = price;
}

This the code does not only run once when the page is loaded.

answered Apr 16, 2014 at 23:31

Ibu

44k14 gold badges82 silver badges109 bronze badges

1 Comment

Ruan Mendes Over a year ago

I upvoted this, but there are a number of other problems, this alone doesn't make it work

Collectives™ on Stack Overflow

Add value to JavaScript variable when checkbox is checked

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