Return 基于复选框更改的总数

Question

我有一个 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>

我希望将 value-redemptions 值添加到总值中，或者根据复选框单击将其删除。

我有复选框做我想做的事，但我总得到一个 NaN return。

我用的javascript是：

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

您正在检索元素，而不是它们包含的文本。因此，例如，而不是 var shipping = parseFloat(document.getElementById('value-shipping'));，请尝试 var shipping = parseFloat(document.getElementById('value-shipping').innerText);

Return 基于复选框更改的总数

Return the total based on a checkbox change

javascript

innerhtml

getelementbyid