订单＆＃34;形式＆＃34;，最终计算不计算

时间：2018-04-18 04:23:39

标签： javascript html

这应该是一个简单的纯html，css和javascript订单，包含四个不同产品的四个字段。用户可以调整数量并计算每个产品和最终总数的总计。一切都在工作，除了最终的计算，我不知道为什么，因为它使用了我用来计算个别总数的相同方法。 

<!DOCTYPE html>
    <html>
    <head>
        <title>Order Form</title>
    <style>
    #productOnePrice, #productOneName, #productOneQuantity, #productOneTotal, 
    #productTwoPrice, #productTwoName, #productTwoQuantity, #productTwoTotal,
    #productThreePrice, #productThreeName, #productThreeQuantity, 
    #productThreeTotal, #productFourPrice, #productFourName, 
    #productFourQuantity, #productFourTotal, #orderTotalButton, #orderTotal{
        height:20px;
        width:238px;
        float:left;
        margin: 5px 5px 5px 5px;
        padding: 1px 1px 1px 1px;
        outline: 2px solid black;
        text-align: center;
    }
    .container {
        height:auto;
        width:1000px;
        float:left;
        padding: 5px 5px 5px 5px; 
        outline: 2px solid black;
        text-align: center;
    }

    .quantityOne{
        text-align: right;
    }
    </style>
</head>
<body>
    <div class="container">
<!-- Product One -->
        <div>
            <p id="productOneName"></p>
        </div>
        <div>
            <p id="productOnePrice"></p>
        </div>
        <div>
            <p id="productOneQuantity">
                <input id="quantityOne" type="number">
                 <button onclick="productOneTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productOneTotal"></p>
        </div>
<!-- Product Two --> 
        <div>
            <p id="productTwoName"></p>
        </div>
        <div>
            <p id="productTwoPrice"></p>
        </div>
        <div>
            <p id="productTwoQuantity">
                <input id="quantityTwo" type="number">
                 <button onclick="productTwoTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productTwoTotal"></p>
        </div>
<!-- Product Three --> 
        <div>
            <p id="productThreeName"></p>
        </div>
        <div>
            <p id="productThreePrice"></p>
        </div>
        <div>
            <p id="productThreeQuantity">
                <input id="quantityThree" type="number">
                 <button onclick="productThreeTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productThreeTotal"></p>
        </div>
<!-- Product Four --> 
        <div>
            <p id="productFourName"></p>
        </div>
        <div>
            <p id="productFourPrice"></p>
        </div>
        <div>
            <p id="productFourQuantity">
                <input id="quantityFour" type="number">
                 <button onclick="productFourTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productFourTotal"></p>
        </div>
<!-- Order Total --> 
        <div>
            <p id="orderTotalButton">
                 <button onclick="orderTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="orderTotal"></p>
        </div>
        <script>
/* Product One Total Function */
            document.getElementById("productOneName").innerText = "mp3";
            document.getElementById("productOnePrice").innerHTML = 1;
            function productOneTotal(price, quantity){
                price = 1;
                quantity = document.getElementById("quantityOne").value;
                document.getElementById("productOneTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Product Two Total Function */
            document.getElementById("productTwoName").innerText = "Cassette";
            document.getElementById("productTwoPrice").innerHTML = 1;
            function productTwoTotal(price, quantity){
                price = 1;
                quantity = document.getElementById("quantityTwo").value;
                document.getElementById("productTwoTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Product Three Total Function */
            document.getElementById("productThreeName").innerText = "Vinyl LP";
            document.getElementById("productThreePrice").innerHTML = 1;
            function productThreeTotal(price, quantity){
                price = 1;
                quantity = document.getElementById("quantityThree").value;
                document.getElementById("productThreeTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Product Four Total Function */
            document.getElementById("productFourName").innerText = "T-Shirt";
            document.getElementById("productFourPrice").innerHTML = 1;
            function productFourTotal(price, quantity){
                price = 1;
                quantity = document.getElementById("quantityFour").value;
                document.getElementById("productFourTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Order Total Function */
            function orderTotal(productOneTotal, productTwoTotal, 
productThreeTotal, productFourTotal){
                productOneTotal = 
document.getElementById("productOneTotal").value;
                productTwoTotal = 
document.getElementById("productTwoTotal").value;
                productThreeTotal = 
document.getElementById("productThreeTotal").value;
                productFourTotal = 
document.getElementById("productFourTotal").value;
                document.getElementById("orderTotal").innerHTML = 
parseInt(productOneTotal) + parseInt(productTwoTotal) + 
parseInt(productThreeTotal) + parseInt(productFourTotal);
            }
        </script>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

您需要使用.innerHTML而不是值来定位总元素。

productOneTotal = document.getElementById("productOneTotal").innerHTML;

那将删除您获得的NaN错误。

元素没有值，因此检索.value的尝试返回undefined。

答案 1 :(得分：0)

注意：使用文本框和其他元素 .value 。和div元素获得我们使用的值 .innerHTML

＆＃13;
＆＃13; 
<!DOCTYPE html>
    <html>
    <head>
        <title>Order Form</title>
    <style>
    #productOnePrice, #productOneName, #productOneQuantity, #productOneTotal, 
    #productTwoPrice, #productTwoName, #productTwoQuantity, #productTwoTotal,
    #productThreePrice, #productThreeName, #productThreeQuantity, 
    #productThreeTotal, #productFourPrice, #productFourName, 
    #productFourQuantity, #productFourTotal, #orderTotalButton, #orderTotal{
        height:20px;
        width:238px;
        float:left;
        margin: 5px 5px 5px 5px;
        padding: 1px 1px 1px 1px;
        outline: 2px solid black;
        text-align: center;
    }
    .container {
        height:auto;
        width:1000px;
        float:left;
        padding: 5px 5px 5px 5px; 
        outline: 2px solid black;
        text-align: center;
    }

    .quantityOne{
        text-align: right;
    }
    </style>
</head>
<body>
    <div class="container">
<!-- Product One -->
        <div>
            <p id="productOneName"></p>
        </div>
        <div>
            <p id="productOnePrice"></p>
        </div>
        <div>
            <p id="productOneQuantity">
                <input id="quantityOne" type="number">
                 <button onclick="productOneTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productOneTotal"></p>
        </div>
<!-- Product Two --> 
        <div>
            <p id="productTwoName"></p>
        </div>
        <div>
            <p id="productTwoPrice"></p>
        </div>
        <div>
            <p id="productTwoQuantity">
                <input id="quantityTwo" type="number">
                 <button onclick="productTwoTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productTwoTotal"></p>
        </div>
<!-- Product Three --> 
        <div>
            <p id="productThreeName"></p>
        </div>
        <div>
            <p id="productThreePrice"></p>
        </div>
        <div>
            <p id="productThreeQuantity">
                <input id="quantityThree" type="number">
                 <button onclick="productThreeTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productThreeTotal"></p>
        </div>
<!-- Product Four --> 
        <div>
            <p id="productFourName"></p>
        </div>
        <div>
            <p id="productFourPrice"></p>
        </div>
        <div>
            <p id="productFourQuantity">
                <input id="quantityFour" type="number">
                 <button onclick="productFourTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="productFourTotal"></p>
        </div>
<!-- Order Total --> 
        <div>
            <p id="orderTotalButton">
                 <button onclick="orderTotal()">Add</button>
            </p>
        </div>
        <div>
            <p id="orderTotal"></p>
        </div>
        <script>
/* Product One Total Function */
            document.getElementById("productOneName").innerText = "mp3";
            document.getElementById("productOnePrice").innerHTML = 1;
            function productOneTotal(){
              
    
                price = 1;
                quantity = document.getElementById("quantityOne").value;
              if(quantity=="") {
                quantity = 0;
              }
                document.getElementById("productOneTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Product Two Total Function */
            document.getElementById("productTwoName").innerText = "Cassette";
            document.getElementById("productTwoPrice").innerHTML = 1;
            function productTwoTotal(){
                price = 1;
                quantity = document.getElementById("quantityTwo").value;
                   if(quantity=="") {
                quantity = 0;
              }
              document.getElementById("productTwoTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Product Three Total Function */
            document.getElementById("productThreeName").innerText = "Vinyl LP";
            document.getElementById("productThreePrice").innerHTML = 1;
            function productThreeTotal(){
                price = 1;
                quantity = document.getElementById("quantityThree").value;
                   if(quantity=="") {
                quantity = 0;
              }
              document.getElementById("productThreeTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Product Four Total Function */
            document.getElementById("productFourName").innerText = "T-Shirt";
            document.getElementById("productFourPrice").innerHTML = 1;
            function productFourTotal(){
                price = 1;
                quantity = document.getElementById("quantityFour").value;
                  if(quantity=="") {
                quantity = 0;
              }
              document.getElementById("productFourTotal").innerHTML = 
 parseInt(price) * parseInt(quantity);
            }
/* Order Total Function */
            function orderTotal(productOneTotal, productTwoTotal, 
productThreeTotal, productFourTotal){
              
                productOneTotal = 
document.getElementById("productOneTotal").innerHTML;
              
                productTwoTotal = 
document.getElementById("productTwoTotal").innerHTML;
                productThreeTotal = 
document.getElementById("productThreeTotal").innerHTML;
                productFourTotal = 
document.getElementById("productFourTotal").innerHTML;
              if(productOneTotal=="") {
                    productOneTotal=0;
               
              }
               if(productTwoTotal=="") {
                    productTwoTotal=0;
                 
              }
                if(productThreeTotal=="") {
                    productThreeTotal=0;
                  
              }
              if(productFourTotal=="") {
                    productFourTotal=0;
                 
              }
              
                document.getElementById("orderTotal").innerHTML = 
parseInt(productOneTotal) + parseInt(productTwoTotal) + 
parseInt(productThreeTotal) + parseInt(productFourTotal);
              
              }
        </script>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题