需要帮助在本文档末尾显示计算

Question

我试图在底部的文本框中显示“totaldue”作为“输出”。 我目前不了解如何在文本框中显示总计，因此将不胜感激。 另外我想知道我是否需要脚本标签中的任何函数......在分配规则下，它指出我应该只在脚本标签中声明变量。 多谢你们！

<!doctype html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title> Pizza Party</title>

    </head>

    <body>
        <H1> PIZZA PLACE </H1>
        <!--Image goes here-->
        <center><img src="pizza.png" alt="Pizza" width="220px" height="160px"></center>
        <br><br>



        <script>
        function pricecalculate()
        {
         var cheeseprice = 11.99*Number(cheese_value);
         var mushroomprice = 12.99*Number(mushroom_value);
         var sausageprice =13.49*Number(sausage_value);
         var veggieprice =12.49*Number(veggie_value);
         var deliver ="no";
         var tip = 0;
         var deliveryFee =0;
         var priceofpizza = cheeseprice + mushroomprice + sausageprice + veggieprice

         if (deliver="yes"){
            deliveryFee =3.99;
            }

        output.value = totaldue
         }


        </script>
        <p>Please designate the pizza type and the quantity in the boxes below</p>
        <p>Cheese <input type ="text" id="cheese" onchange=''></p>
        <p>Mushroom <input type ="text" id="mushroom" onchange=''></p>
        <p>Sausage <input type ="text" id="sausage" onchange=''></p>
        <p>Veggie <input type ="text" id="veggie" onchange=''></p>
        <br><br>

        <p>Delivery Preference</p>
        <p><input type ="radio" name="takeout" id="takeout" onlick=''>Takeout</p>
        <p><input type ="radio" name="delivery" id="delivery" onlick='deliver="yes"'>Delivery</p>

        <br><br>
        <p>Tip amount</p>
        <p><input type ="radio" name="fifteen" id="fifteen" onlick='var tip=0.15'>15%</p>
        <p><input type ="radio" name="eighteen" id="eighteen" onlick='var tip=0.18'>18%</p>
        <p><input type ="radio" name="twenty" id="twenty" onlick='var tip=0.20'>20%</p>
        <p><input type ="radio" name="notip" id="notip" onlick='var tip=0'>No Tip</p><!--All of the input boxes and directions to the user go below -->



        <!--this is the start of the button info -->
      <button id="totalSales" onclick = "
                     var totaldue = priceofpizza + (priceofpizza*tip) + deliveryFee
                     " >Calculate Total</button> <br>


        <input type="text" id="output">
    </body>
</html>

Answer 1

需要进行许多更改：

无线电组使用不当； 属于同一组的单选按钮需要相同的名称，否则可以为一组选择多个单选按钮
您需要定义一个全局变量以按照您的方式在不同范围之间传递值（例如priceofpizza不会在您在<button>元素上使用的 onclick 的onclick中退出），我继续通过声明一个global / window变量称为model
您需要使用 DOM ( document ) 实际检索输入的值

<html><head>
        <meta charset="UTF-8">
        <title> Pizza Party</title>

    </head>

    <body>
        <h1> PIZZA PLACE </h1>
        <!--Image goes here-->
        <center><img src="pizza.png" alt="Pizza" width="220px" height="160px"></center>
        <br><br>



        <script>
        window.model = {};
        window.pricecalculate = function()
        {
         model.cheeseprice = 11.99*Number(document.querySelector('#cheese').value);
         model.mushroomprice = 12.99*Number(document.querySelector('#mushroom').value);
         model.sausageprice =13.49*Number(document.querySelector('#sausage').value);
         model.veggieprice =12.49*Number(document.querySelector('#veggie').value);
         var deliveryOptions = Array.prototype.slice.call(document.getElementsByName('delivery-method')); // you need to use Array.prototype.slice.call to cast the NodeLits returned by document.getElementsByName into an Array and then use the Array's find method
         console.log(deliveryOptions);
         model.deliver =deliveryOptions.find(option => option.checked).value === 'delivery'
         var tipOptions = Array.prototype.slice.call(document.getElementsByName('tip'));
         model.tip = tipOptions.find(option => option.checked).value;

         model.deliveryFee =0;
         model.priceofpizza = model.cheeseprice + model.mushroomprice + model.sausageprice + model.veggieprice

         if (deliver="yes"){
            model.deliveryFee =3.99;
            }

         }


        </script>
        <p>Please designate the pizza type and the quantity in the boxes below</p>
        <p>Cheese <input type="text" id="cheese" onchange=""></p>
        <p>Mushroom <input type="text" id="mushroom" onchange=""></p>
        <p>Sausage <input type="text" id="sausage" onchange=""></p>
        <p>Veggie <input type="text" id="veggie" onchange=""></p>
        <br><br>

        <p>Delivery Preference</p>
        <p><input type="radio" name="delivery-method" id="takeout" value="takeout">Takeout</p>
        <p><input type="radio" name="delivery-method" id="delivery" value="delivery">Delivery</p>

        <br><br>
        <p>Tip amount</p>
        <p><input type="radio" name="tip" id="fifteen" value="0.15">15%</p>
        <p><input type="radio" name="tip" id="eighteen" value="0.18">18%</p>
        <p><input type="radio" name="tip" id="twenty" value="0.20">20%</p>
        <p><input type="radio" name="tip" id="notip" value="0">No Tip</p><!--All of the input boxes and directions to the user go below -->



        <!--this is the start of the button info -->
      <button id="totalSales" onclick="
                     pricecalculate();
                     var totaldue = model.priceofpizza + (model.priceofpizza*model.tip) + model.deliveryFee
                     var output = document.querySelector('#output');
                     output.value = totaldue;
                     ">Calculate Total</button> <br>


        <input type="text" id="output">

</body></html>

需要帮助在本文档末尾显示计算

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-10-22 21:42:58

需要帮助在本文档末尾显示计算

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-10-22 21:42:58

解决方案1
0 已采纳 2019-10-22 21:42:58