根据复选框更改返回总数

Posted 2023-05-07

【中文标题】根据复选框更改返回总数

【英文标题】：Return the total based on a checkbox change

【发布时间】：2022-01-01 10:00:30

【问题描述】：

我有一张桌子：

<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 的总回报。

我使用的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;
  
; 

【参考方案1】：

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

【讨论】：

谢谢，解决了 NaN 的问题，我想我现在应该可以弄清楚其余的了，你是最棒的，非常感谢。

感谢您选择我的答案作为您的解决方案。