Return the total based on a checkbox change

Question

I have a table:

<table  style="width:100%;">
 <tr>
   <td align="right" class="mainText"><div id="text-subtotal">Sub-Total:</div></td>
   <td align="right" class="mainText"><div id="value-subtotal">103.75</div></td>
 </tr>
 <tr>
   <td align="right" class="mainText"><div id="text-redemptions">Points Redeemed:</div></td>
   <td align="right" class="mainText"><div id="value-redemptions">10.00</div></td>
</tr>              
<tr>
  <td align="right" class="mainText"><div id="text-tax">Sales Tax (Springside) :</div></td>
   <td align="right" class="mainText"><div id="value-tax">5.59</div></td>
 </tr>              
<tr>
  <td align="right" class="mainText"><div id="text-shipping">Shipping : </div></td>
  <td align="right" class="mainText"><div id="value-shipping">0.00</div></td>
 </tr>              
<tr>
  <td align="right" class="mainText"><div id="text-total">Total:</div></td>
   <td align="right" class="mainText"><div id="value-total">99.34</div></td>
</tr>                                   
</table>

I am looking to add in the value-redemptions value to the total or remove it based on a check box click.

I have the checkbox doing what I want, but I keep getting a NaN return on the total.

the javascript I am using is:

function myPoints() {
  // Get the checkbox
  var checkBox = document.getElementById("points");
  var redemptions_text = document.getElementById("text-redemptions");
  var redemptions_value = document.getElementById("value-redemptions");
  var redemptions_notice = document.getElementById("point-notice");
  
  var shipping = parseFloat(document.getElementById('value-shipping'));
  var subtotal = parseFloat(document.getElementById('value-subtotal'));
  var redemptions = parseFloat(document.getElementById('value-redemptions'));
  var taxes = parseFloat(document.getElementById('value-tax'));


  var total = subtotal + taxes + shipping - redemptions;


  
  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){

    redemptions_text.style.display = "block";
    redemptions_value.style.display = "block";
    redemptions_notice.style.display = "block";
    document.getElementById('value-total').innerHTML = total;
  
    
  } else {
    redemptions = 0;
    redemptions_text.style.display = "none";
    redemptions_value.style.display = "none";
    redemptions_notice.style.display = "none";
    document.getElementById('value-total' ).innerHTML = total;
  }
}; 

Answer 1

You are retrieving elements, rather than the text they contain. So, for example, rather than var shipping = parseFloat(document.getElementById('value-shipping'));, try var shipping = parseFloat(document.getElementById('value-shipping').innerText);