CODEWITHSUNDEEP
javascripthtmlcheckboxinnerhtml
user3543284
user3543284

Reputation: 85

Add value to JavaScript variable when checkbox is checked

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

Upvotes: 1

Views: 8551

Answers (2)

Ruan Mendes
Ruan Mendes

Reputation: 92324

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

Upvotes: 3

Ibu
Ibu

Reputation: 43850

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.

Upvotes: 1

Related Questions