Question

我无法弄清楚为什么我提交按钮会让我无处可去。我是HTML和编程的新手。是否有人能够梳理并帮助我确定为什么这不正确提交？

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
    <title>Place an Order - Love that Ink Pen Company</title>
    <script>
        // values
        var name = document.getElementById('cusName').value;
        var deliverydate = document.getElementById('delDate').value;
        var numItems = parseInt(document.getElementById('numItems').value); 

        // calculations
        var price = numItems * 4.25;
        var tax = price * 0.07;
        var shipping = price * 0.02;
        var totalCost = price + tax + shipping;

        // Output text
        var text = 'Thank you ' + name + 'for you order.<br/>';
        text += 'You will receive ' + numItems + ' items delivered to you on ' + deliveryDate + '.<br/>';
                text += 'You price of your items is $' + price.toFixed(2) + '.<br/>';
            text += 'The tax charge is $' + tax.toFixed(2) + '.<br/>';
                text += 'The shipping charge is $' + shipping.toFixed(2) + '.<br/>';
            text += 'Your total is $' + totalCost.toFixed(2) + '.<br\>';;

        // Results
        document.write('<h2>' + text + '</h2>');;
        } 
      </script>  
</head>
<body>

    <div style="text-align: left; background-color:Orange; color:Black; 16px;">
        <h1>Place an Order</h1>

      <form action="#"> 
         <label>Customer Name:</label>
             <input type="text" id="cusName"><br>

         <label>Delivery Date:</label>
         <input type="text" id="delDate"><br>

         <label>Number Items:</label>
         <input type="text" id="numItems"><br>
    </div>  

    <div style="text-align: left; background-color:Green; color:Black; 16px;">
         <input type="submit" id="btnSubmit" value="Submit" onclick="calculateTotal(); return false;" />
    </div>

    </form> 

    <div style="background-color:Orange; color:Black; 16px;">
        <h2>
            Visit our <a href="https://www.pens.com/" target="_blank">External Website</a>
        </h2>

        <h2>
            <a href="week1-1.html">Link</a> to our main page.
        </h2>
    </div>
</body>
</html>

我不只是想要一个答案，我正在寻找我做错的事。我想学习和理解我不理解的地方。

Answer 1

首先，您正在接受表单提交您的数据应用程序没有必要形成你可以做到没有形式以及表格。
第二件事是你正在调用calculateTotal()函数和你没有在脚本标签中创建该功能。
第三件事是deliverydate和deliveryDate不同你需要改变的事情。

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
    <title>Place an Order - Love that Ink Pen Company</title>
    <script>
        // values
        function calculateTotal(){
        var name = document.getElementById('cusName').value;
        var deliverydate = document.getElementById('delDate').value;
        var numItems = parseInt(document.getElementById('numItems').value); 

        // calculations
        var price = numItems * 4.25;
        var tax = price * 0.07;
        var shipping = price * 0.02;
        var totalCost = price + tax + shipping;

        // Output text
        var text = 'Thank you ' + name + 'for you order.<br/>';
        text += 'You will receive ' + numItems + ' items delivered to you on ' + deliverydate + '.<br/>';
                text += 'You price of your items is $' + price.toFixed(2) + '.<br/>';
            text += 'The tax charge is $' + tax.toFixed(2) + '.<br/>';
                text += 'The shipping charge is $' + shipping.toFixed(2) + '.<br/>';
            text += 'Your total is $' + totalCost.toFixed(2) + '.<br\>';;

        // Results
        document.write('<h2>' + text + '</h2>');;
        } 
      
      </script>  
</head>
<body>

    <div style="text-align: left; background-color:Orange; color:Black; 16px;">
        <h1>Place an Order</h1>
      
         <label>Customer Name:</label>
             <input type="text" id="cusName"><br>

         <label>Delivery Date:</label>
         <input type="text" id="delDate"><br>

         <label>Number Items:</label>
         <input type="text" id="numItems"><br>
    </div>  

    <div style="text-align: left; background-color:Green; color:Black; 16px;">
         <input type="submit" id="btnSubmit" value="Submit" onclick="calculateTotal(); return false;" />
    </div>

    

    <div style="background-color:Orange; color:Black; 16px;">
        <h2>
            Visit our <a href="https://www.pens.com/" target="_blank">External Website</a>
        </h2>

        <h2>
            <a href="week1-1.html">Link</a> to our main page.
        </h2>
    </div>
</body>
</html>

＆＃13;

Answer 2

我正在寻找我做错的事。

您已在标题部分定义了脚本标记，当document.getElementById将被执行时，DOM尚未就绪。将它们移至正文标记的结尾

<body>  <script> //js code </script> </body>

或使用windows.load

2.没有定义calculateTotal

3.这里有一个额外的冒号（:)和}

document.write('<h2>' + text + '</h2>');;}

4.Typo at deliverydate

HTML帮助。

2 个答案: