javascript - 为什么动态值不会以这种形式打印？

Question

我正在尝试将动态值粘贴到 readonly 输入 html 表单字段上。我有一个计算购物车总额的脚本，我试图让总计出现在只读字段中，以便它可以与表单的其余部分一起发送。不幸的是，当我使用输入表单字段而不是div时，总计返回0.0。有什么想法吗？

示例如下。

税收计算脚本:

<script>
    function applyTax(){
  var cartSubTotal = parseFloat(document.getElementById( 'cartSubtotal' ).innerHTML);
  console.log(cartSubTotal);
  var salesTaxGst = (cartSubTotal / 100) * 5;
  var salesTaxPst =  (cartSubTotal / 100) * 9.975;
  var totalAmount = (cartSubTotal*1) + (salesTaxGst * 1) +(salesTaxPst * 1) ;

  document.getElementById( 'cartSubtotal' ).innerHTML = cartSubTotal.toFixed(2);
  document.getElementById( 'taxGst' ).innerHTML = salesTaxGst.toFixed(2);
  document.getElementById( 'taxPst' ).innerHTML = salesTaxPst.toFixed(2);
  var elements = document.getElementsByClassName( 'cartTotal' );

for(var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = totalAmount.toFixed(2);

}}

// Call the applyTax() when the window finishes loading...
window.onload = function() {
  applyTax();
};

</script>

形式:

<div id="payment_container">
                <div class="checkout_table_left">Subtotal</div><div class="checkout_table_right" id="cartSubtotal">${cart.subtotal}</div>

                <div class="checkout_table_left" >Gst&nbsp;<a class='tooltip' href='#'><small style="background-color: rgb(233, 233, 233);">?</small><span><fmt:message key='GstInfo'/> </span></a></div>

                <div id="taxPst" class="checkout_table_right"></div>

                <div class="checkout_table_left">Pst&nbsp<a class='tooltip' href='#'><small style="background-color: rgb(233, 233, 233);">?</small><span><fmt:message key='PstInfo'/>  </span></a></div>
                <div id="taxGst" class="checkout_table_right"></div>

                <div class="checkout_table_left">Shipping</div><div class="checkout_table_right">Free</div>



                <form  class="checkout_form"  method="post" action="purchase" name="checkout">

                    <div class="checkout_table_left">Grand Total</div>
                    <input class="cartTotal checkout_table_right" readonly type="text" value="${cart.total}"></input>
</form>

Answer 1

您需要设置 value输入的，而不是 innerHTML ，自 <input>元素不能包含其他元素:

  var elements = document.getElementsByClassName( 'cartTotal' );
  for(var i = 0; i < elements.length; i++) {
        elements[i].value = totalAmount.toFixed(2);
  }