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

【问题标题】：Why would the dynamic value won't print in this form?为什么动态值不会以这种形式打印？
【发布时间】：2015-05-17 05:17:43
【问题描述】：

我正在尝试在 readonly 输入 html 表单字段上粘贴动态值。我有一个计算购物车总数的脚本，我试图让grand total 出现在只读字段中，以便它可以与表单的其余部分一起发送。不幸的是，当我使用input form field 而不是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>

【问题讨论】：

标签： javascript html forms jsp

【解决方案1】：

你需要设置输入的value，而不是innerHTML，因为<input>元素不能包含其他元素：

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

【讨论】：

【解决方案2】：

您必须为<input> 元素设置value

所以它会是： elements[i].value = 'my value';

如果elements 可以是不同的类型，则需要一个条件：

if (elements[i].type == 'INPUT') {
    elements[i].value = 'my value';
}
else {
    elements[i].innerHTML = 'my value';
}

jQuery 方式将分别为"some selector".val('my value') 和"some selector".html('my value')。

【讨论】：