如何将手动销售计算器脚本转换为自动销售计算器脚本？

Question

我有这本手册javascript

<head>
    <script type="text/javascript">
    function applyTax(){
      var inputAmount = document.getElementById( 'dollars' ).value;
      var salesTaxGst = (inputAmount / 100) * 5;
      var salesTaxPst =  (inputAmount / 100) * 9.975;
      var totalAmount = (inputAmount*1) + (salesTaxGst * 1) +(salesTaxPst * 1) ;

      document.getElementById( 'requestedAmount' ).innerHTML = inputAmount;
      document.getElementById( 'requestedTaxGst' ).innerHTML = salesTaxGst;
      document.getElementById( 'requestedTaxPst' ).innerHTML = salesTaxPst;
      document.getElementById( 'requestedTotal' ).innerHTML = totalAmount;
    }

    </script>
</head>

和html

<body>

<input type="text" id="dollars" />
<input type="button" onclick="applyTax();" value="Calculate" />

<div id="requestedAmount"> </div>
<div id="requestedTaxGst"> </div>
<div id="requestedTaxPst"> </div>
<div id="requestedTotal"> </div>

</body>
</html>

基本上这个脚本需要用户手动输入数据来计算税收。我正在尝试将其转换为电子商务网站的自动销售税计算器。

购物车页面：

    <div id="store_container">
            <div id="store">


                <%-- Left Navigation --%>
                <div style="text-align: center;" id="category">
                    <div id="items"><fmt:message key='summary'/>
                    </div>


                    <div class="cat_row">

                        <div style="text-align: left;"><span style="font-weight: bold;"><span
                                    style="background-color: rgb(239, 239, 239);"><fmt:message key='CartCategoryLabel1'/></span></span><br>


                            <%-- Start of Left Nav Widgets--%>
                            <ul style="list-style-type: none;">

                                <%-- clear cart widget --%>
                                <c:set var="value">
                                <c:choose>
                                <%-- if 'selectedCategory' session object exists, send user to previously viewed category --%>
                                        <c:when test="${!empty selectedCategory}">

                                        </c:when>

                                        <%-- otherwise send user to welcome page --%>
                                <c:otherwise>

                                    </c:otherwise>
                            </c:choose>
                         </c:set>                     
                <c:url var="url" value="${value}"/>
                <li><a href="viewCart?clear=true"><fmt:message key='ClearCart'/></a></li>

                    <%-- checkout widget --%>
                    <c:if test="${!empty cart && cart.numberOfItems != 0}">
                <li><a href="checkout"><fmt:message key='Checkout'/></a></li>
                </c:if>


                                <%-- continue shopping widget --%>
        <c:set var="value">
            <c:choose>
                <%-- if 'selectedCategory' session object exists, send user to previously viewed category --%>
                <c:when test="${!empty selectedCategory}">
                    category
                </c:when>
                <%-- otherwise send user to welcome page --%>
                <c:otherwise>
                    index.jsp
                </c:otherwise>
            </c:choose>
        </c:set>
                                <li style="background-color: rgb(198, 255, 201);"><a href="${value}"><fmt:message key='ContinueShopping'/></a></li>
                            </ul>

                            <br>
                            <span style="text-decoration: underline;"></span>
                        </div>
                    </div>
                    <%-- End of Left Navigation --%>


                <%-- Start of Cart Breadcrumbs --%>
                <div style="text-align: center;" id="thumbnails">
                    <div id="items">My shopping cart<br>
                    </div>
                    <br>

                    <div style="text-align: left; font-weight: bold;">
                        <div style="text-align: center;"><big></big></div>

                        <%-- Subtotal of cart--%>
                        <c:if test="${!empty cart && cart.numberOfItems != 0}">
                            <div style="text-align: center;" class="item_col"><big><fmt:message key='Subtotal'/> (${cart.subtotal})<br>
                                </big></div>
                            <big></big>
                        </c:if>
                        <%-- End Subtotal of cart--%>




                        <%-- Number of items in cart--%>
                        <div style="text-align: center;" class="item_col2">

                            <c:choose>
        <c:when test="${cart.numberOfItems > 1}">
            <big><fmt:message key='YouHave'/> (${cart.numberOfItems}) <fmt:message key='ItemsInYourCart'/><br></big>
        </c:when>
        <c:when test="${cart.numberOfItems == 1}">
            <big><fmt:message key='YouHave'/> (${cart.numberOfItems}) <fmt:message key='ItemsInYourCart'/><br></big>
        </c:when>
        <c:otherwise>
            <big><fmt:message key='EmptyShoppingCart'/><br></big>
        </c:otherwise>
    </c:choose>
                        </div>

                        <div style="text-align: center;"><big></big></div>
                    </div>
                    <big><br style="font-weight: bold;">
                    </big>
                    <%-- End of cart Breadcrumbs --%>       



                    <%-- Start of Products Table--%>        
                    <div style="font-weight: bold;" id="thumb_container"> 
                        <div style="text-align: left;">
                            <table style="text-align: left; width: 100%;" border="0" cellpadding="0"
                                   cellspacing="0">

                                <c:forEach var="cartItem" items="${cart.items}" varStatus="iter">
                                    <c:set var="product" value="${cartItem.product}"/>

                                    <tbody>
                                        <tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">
                                            <td
                                                style="vertical-align: middle; width: 196px; text-align: center; height: 140px;"><img class="img" src="${initParam.productImagePath}${product.name}.jpg"<br>
                                            </td>
                                            <td
                                                style="vertical-align: middle; width: 164px; text-align: center; height: 140px;">${product.name}<br>
                                            </td>
                                            <td

                                                style="vertical-align: middle; width: 100px; text-align: center; height: 140px;">${product.price}<br>
                                            </td>
                                            <td
                                                style="vertical-align: middle; width: 180px; text-align: center; height: 140px;"><form action="addToWishlist" method="post"><br><br> <input
name="productId" value="${product.id}" type="hidden"> <input class="submit"
value="Add To Wishlist" type="submit"></form><br>
                                            </td>
                                            <td
                                                style="vertical-align: middle; text-align: center; height: 140px; width: 180px; padding-top:35px;"><form action="updateCart" method="post">
                                                    <input type="hidden"
                                                           name="productId"
                                                           value="${product.id}">

                                                    <input type="text"
                                                           maxlength="2"
                                                           size="2"
                                                           value="${cartItem.quantity}"
                                                           name="quantity"
                                                           style="margin:0px">

                                                    <input class="updateButton"  type="submit"
                                                           name="submit"
                                                           value="update">

                                                </form><br>
                                            </td>
                                        </tr>
                                    </tbody>

                                </c:forEach>
                            </table>


                            <%-- End of Products Table--%>

所以我在考虑将脚本转换为自动计算购物车小计我只需要通过声明不同的变量来改变一些东西吗？

示例：

<head>
<script type="text/javascript">
function applyTax(){
  var ${cart.subtotal} = document.getElementById( 'cartSubtotal' ).value;
  var salesTaxGst = (${cart.subtotal} / 100) * 5;
  var salesTaxPst =  (${cart.subtotal} / 100) * 9.975;
  var totalAmount = (${cart.subtotal}*1) + (salesTaxGst * 1) +(salesTaxPst * 1) ;

  document.getElementById( 'cartSubtotal' ).innerHTML = ${cart.subtotal} ;
  document.getElementById( 'taxGst' ).innerHTML = salesTaxGst;
  document.getElementById( 'taxPst' ).innerHTML = salesTaxPst;
  document.getElementById( 'cartTotal' ).innerHTML = totalAmount;
}
</script>
</head>


<html>
<body>

<input type="text" id="cartSubtotal" />
<input type="button" onload="applyTax();" value="Calculate" />

<div id="cartSubtotal"> </div>
<div id="taxGst"> </div>
<div id="taxPst"> </div>
<div id="cartTotal"> </div>

</body>
</html>

------ 编辑 ----

为了更好看，这是 Forever 21 结帐过程的屏幕截图。你看，在页面的末尾，他们显示了 total amount = cart subtotal + tax + shipping。这正是我试图用脚本做的。

快照：

Answer 1

我认为这就是你想要做的：

<html>

<body>
  <input type="text" id="cartSubtotal" />
  <input type="button" onClick="applyTax();" value="Calculate" />
  <div id="cartSubtotal"></div>
  <div id="taxGst"></div>
  <div id="taxPst"></div>
  <div id="cartTotal"></div>
  <script>
    function applyTax() {
      var cartSubtotal = parseFloat(document.getElementById('cartSubtotal').value);
      if (!isNaN(cartSubtotal)){
        var salesTaxGst = (cartSubtotal / 100) * 5;
        var salesTaxPst = (cartSubtotal / 100) * 9.975;
        var totalAmount = cartSubtotal + salesTaxGst + salesTaxPst;
        document.getElementById('cartSubtotal').innerHTML = "Subtotal: " + cartSubtotal;
        document.getElementById('taxGst').innerHTML = "Sales tax GST: " + salesTaxGst;
        document.getElementById('taxPst').innerHTML = "Sales tax PST: " + salesTaxPst;
        document.getElementById('cartTotal').innerHTML = "Total amount: " + totalAmount;
      }
    }
  </script>
</body>

</html>

然而，即使继续阅读您的主题，我认为您仍然不清楚。你有一个生成页面的服务器，生成的所有内容都将在服务器端处理，因此你可以使用诸如 or ${..} 之类的符号。但是一旦这个页面被发送到客户端（客户端正在使用 javascript），你就不能再更改这些信息，因为你已经不在服务器上了。

如果您想更新服务器上的数据，您必须通过 HTTP 请求或 Ajax 调用再次联系服务器。

Answer 2

这是我对你想要的最好解释的解决方案。对我来说，您似乎想要获取显示的小计并通过 javascript 计算税金。这可能不是最好的方法，因为我假设您稍后会在结帐过程中使用这些值，并且您应该在后端计算这些值然后显示它们而不是通过 javascript, 但我跑题了。

Javascript:

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);
  document.getElementById( 'cartTotal' ).innerHTML = totalAmount.toFixed(2);
}

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

注意： 我添加了 toFixed(2) 以包括 "cents" 占位符，即使它们的值为零。

使用以下 HTML:

<div class="main">
  <h1>Cart</h1>
  <p>Cart Subtotal: $<span id="cartSubtotal">100.00</span></p>
  <p>Sales Tax GST: $<span id="taxGst"></span></p>
  <p>Sales Tax PST: $<span id="taxPst"></span></p>
  <p>Final Total: $<span id="cartTotal"></span></p>
</div>

会显示这样的东西吗：

Cart

Cart Subtotal: 0.00
Sales Tax GST: .00
Sales Tax PST: .97
Final Total: 4.97

请注意，您已经将价格作为浮点数插入到 ID 为 cartSubtotal

的项目中

也许可以玩一个 CodePen 示例？ http://codepen.io/scrapcode/pen/GgYXaQ

如何将手动销售计算器脚本转换为自动销售计算器脚本？

How to convert a manual sales calculator script into an automatic sales calculator script?

javascript

calculator