如何从2本教科书中取出值并打印出来是另一本使用js的教科书

时间:2018-01-04 14:24:18

标签: javascript html

在这里,我试图从#香草蛋糕和#巧克力蛋糕中取出价值,并确定每个蛋糕和税收的价格。在处理和进行计算之后,我想得到的结果是小计,总计,税收文本框....但我无法获得所需的输出..请帮助我....下面是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>Decent Confenctionery</title>

    <script type="text/javascript">
        function updateOrder() {
            const TAXRATE=0.33;
            const CAKEPRICE=300;
            var numVanilaCake= parseInt(documemt.getElementById("vanilaCake").value);
            var numChocoCake= parseInt(documemt.getElementById("chocoCake").value);
            var subTotal= (numVanilaCake+numChocoCake)* CAKEPRICE;
            var tax= subTotal+TAXRATE;
            var total=subTotal+tax;

            documemt.getElementById("sub_Total").value=subTotal;
            documemt.getElementById("tax_a").value=tax;
            documemt.getElementById("total_a").value=total;
        }
        function placeOrder() {
            form.submit();
        }
    </script>
</head>
<body>

    <h1>DECENT CAKE CONFENCTIONERY</h1>

    <p id="asd">ONLINE CAKE ORDERING SYSTEM</p>
    <p>All cakes 300Rs. each, Vanilla,Chocolate</p>

    <form>
        <label>Customer Name:</label> <input type="text" name="" required 
        placeholder="Enter your name"><br><br>
        <label>Mobile No.:</label><input type="number" name="" required 
        placeholder="Enter your Mobile number"><br><br>
        <label># of vanilaa cake:</label> <input type="number" name="vanilaCake" 
        required placeholder="No. of cakes" onchange="updateOrder();" 
        id="vanilaCake"><br><br>
        <label># of chocolate cake:</label> <input type="number" 
        name="chocoCake" required  placeholder="No. of cakes" 
        onchange="updateOrder();" id="chocoCake" /><br><br>
        <label>Subtotal </label><input type="text" name="" id="sub_Total"><br>
        <br>
        <label>Tax: </label><input type="text" name="" id="tax_a"><br><br>
        <label>Total: </label><input type="text" name="" id="total_a"><br><br>
        <button style="cursor: pointer;" onclick="placeOrder();">Place 
            order</button>
        </form>
    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

你有一个错字,重复你的所有代码,所以:

documemt
______^

应该是:

document

请注意,m应为n

如果传递空字符串,则可以通过NaN初始化字段来阻止0

var numVanilaCake = parseInt(document.getElementById("vanilaCake").value) || 0;
var numChocoCake  = parseInt(document.getElementById("chocoCake").value) || 0;

注意:在这种情况下,使用oninput代替onchange会更有效。

function updateOrder() {
  const TAXRATE = 0.33;
  const CAKEPRICE = 300;
  var numVanilaCake = parseInt(document.getElementById("vanilaCake").value) || 0;
  var numChocoCake = parseInt(document.getElementById("chocoCake").value) || 0;
  var subTotal = (numVanilaCake + numChocoCake) * CAKEPRICE;
  var tax = subTotal + TAXRATE;
  var total = subTotal + tax;

  document.getElementById("sub_Total").value = subTotal;
  document.getElementById("tax_a").value = tax;
  document.getElementById("total_a").value = total;
}

function placeOrder() {
  form.submit();
}
<h1>DECENT CAKE CONFENCTIONERY</h1>

<p id="asd">ONLINE CAKE ORDERING SYSTEM</p>
<p>All cakes 300Rs. each, Vanilla,Chocolate</p>

<form>
  <label>Customer Name:</label> <input type="text" name="" required placeholder="Enter your name"><br><br>
  <label>Mobile No.:</label><input type="number" name="" required placeholder="Enter your Mobile number"><br><br>
  <label># of vanilaa cake:</label> <input type="number" name="vanilaCake" required placeholder="No. of cakes" oninput="updateOrder();" id="vanilaCake"><br><br>
  <label># of chocolate cake:</label> <input type="number" name="chocoCake" required placeholder="No. of cakes" oninput="updateOrder();" id="chocoCake" /><br><br>
  <label>Subtotal </label><input type="text" name="" id="sub_Total"><br>
  <br>
  <label>Tax: </label><input type="text" name="" id="tax_a"><br><br>
  <label>Total: </label><input type="text" name="" id="total_a"><br><br>
  <button style="cursor: pointer;" onclick="placeOrder();">Place 
order</button>
</form>