Question

我试图在readonly输入html表单字段上粘贴动态值。我有一个脚本来计算购物车的总数，我试图让grand total出现在一个只读字段中，这样它就可以与表格的其余部分一起发送。不幸的是，当我使用0.0而不是input form field时，总回报为div。有什么想法吗？

以下示例。

税务计算脚本：

<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);
  }

Answer 2

您必须为value元素

设置<input>

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

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

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

jQuery方式分别为elements[i].value('my value')和elements[i].html('my value')。

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

2 个答案: