javascript - 需要帮助在本文档末尾显示计算结果-6ren

javascript - 需要帮助在本文档末尾显示计算结果

转载作者：行者123 更新时间：2023-11-28 03:27:23

25

4

我试图在底部的文本框中显示“总计”，id'd为“输出”。我目前不明白如何在文本框中显示总应付款，因此任何帮助将不胜感激!另外，我想知道脚本标签中是否需要任何函数...在赋值标题下，它指出我应该只在脚本标签中声明变量。谢谢大家!

<!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>

最佳答案

需要进行一些更改:

radio 组使用不正确；属于同一组的单选按钮需要具有相同的名称，否则可以为一组选择多个单选按钮
您需要定义一个全局变量，以按照您的方式在不同范围之间传递值(例如 priceofpizza 不存在于您在 onclick 元素上使用的 <button> 范围内) ，我继续通过声明 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>

关于javascript - 需要帮助在本文档末尾显示计算结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58512608/

25

4

0

文章推荐： html - 已部署的 Steroid.js 应用未出现在 AppGyver 服务中

文章推荐： javascript - 使用 JavaScript 停止所有 HTML5 音频/视频

文章推荐： javascript - NetSuite Suitelet 未拾取 Shopify Webhook

服务器端的 Firebird 计算(计算)字段
SQL 和一般开发的新手，我有一个表(COUNTRIES)，其中包含字段(INDEX、NAME、POPULATION、AREA) 通常我添加一个客户端(Delphi)计算字段(DENSITY)和 On
jquery - 计算(百分比)计算(像素)
我想使用 calc(100%-100px)，但在我的 demo 中不起作用由于高度只接受像素，因此如何将此百分比值转换为像素。最佳答案以下将为您提供高度: $(window).height();
MySql 计算
我正在尝试在 MySQL 中添加列并动态填充其他列。例如我有一张表“数字”并具有第 1 列、第 2 列、第 3 列，这些总数应填充在第 4 列中最佳答案除非我误解了你的问题，否则你不只是在寻找:
mysql - 计算
我想返回简单计算的结果，但我不确定如何执行此操作。我的表格如下: SELECT COUNT(fb.engineer_id) AS `total_feedback`, SUM(fb.ra
嵌套for循环中的c++计算
我一直在尝试做这个程序，但我被卡住了，我仍然是一个初学者，任何帮助将不胜感激。我需要程序来做打印一个 10 X 10 的表格，其中表格中的每个条目都是行号和列号的总和包含一个累加器，用于计算所有表
c - 计算
这个计算背后一定有一些逻辑。但我无法得到它。普通数学不会导致这种行为。谁能帮我解释一下原因 printf ("float %f\n", 2/7 * 100.0); 结果打印 1.000000 为什么会
计算 AND 的算法
我想计算从 0 到 (n)^{1/2} - 1 的数字的 AND每个数字从 0 到 (n)^{1/2} - 1 .我想在 O(n) 中执行此操作时间，不能使用 XOR、OR、AND 运算。具体来说，
Excel - 在数字格式中使用公式/计算
如何在 Excel 中将公式放入自定义数字格式？例如(出于说明目的随机示例)，假设我有以下数据: 输入输出在不编辑单元格中的实际数据的情况下，我想显示单元格中的值除以 2，并保留两位小数: 有没
Flutter:隔离内存泄漏(计算)
每次我在 Flutter 应用程序中调用计算()时，我都会看到内存泄漏，据我所知，这基本上只是一种生成隔离的便捷方法。我的应用程序内存占用增加并且在 GC 之后永远不会减少。我已将我的代码简化为仅调
R中的RMSE(均方根偏差)计算
我有数字特征观察 V1通过 V12用于目标变量 Wavelength .我想计算 Vx 之间的 RMSE列。数据格式如下。每个变量“Vx”以 5 分钟的间隔进行测量。我想计算所有 Vx 变量的观测值
计算 C 文件中未知数量的字符
我正在寻找一种使用 C 语言计算文件中未知字符数的简单方法。谢谢你的帮助最佳答案 POSIX 方式(可能是您想要的方式): off_t get_file_length( FILE *file ) {
sql - 计算/派生连续日期跨度中的第一个开始日期
我正在使用 Postgres，并且我正试图围绕如何在连续日期跨度中得出第一个开始日期的问题进行思考。例如 :- ID | Start Date | End Date =================
jquery - 计算，用逗号替换点
我有一个订单表格，我在其中使用 jQuery 计算插件来汇总总数。此求和工作正常，但生成的“总和”存在问题。总之，我希望用逗号替换任何点。代码的基础是； function ($this) {
Delphi错误的 double 计算
我在使用 double 变量计算简单算术方程时遇到问题。我有一个具有 double 属性 Value 的组件，我将此属性设置为 100。然后我做一个简单的减法来检查这个值是否真的是 100: va
openssl CRC32 计算
我在这里看到了一些关于 CRC 32 计算的其他问题。但没有一个让我满意，因此是这样。 openssl 库是否有任何用于计算 CRC32 的 api 支持？我已经在为 SHA1 使用 openssl，
php - 计算-1个月时的PHP天错误
当我在PHP日期计算中遇到问题时，我感到惊讶。 $add = '- 30 days'; echo date('Y-m-01', strtotime($add)); // result is 2017-
持有变量的 JavaScript 计算
我正在使用 javascript 进行练习，我编写了这个脚本来计算 2 个变量的总和，然后在第三个方程中使用这个总和!关于如何完成这项工作的任何想法都将非常有用! First Number:
audio - sample 计算
我有一个来自EAC的提示单和一个包含完整专辑的FLAC文件。我正在尝试制作一些python脚本来播放文件，因为我需要能够设置在flac文件中开始的位置。如何从CueSheet格式MM:SS:FF转
javascript - 计算 for 循环中输入值的总和
这个问题已经有答案了: Adding two numbers concatenates them instead of calculating the sum (24 个回答) 已关闭去年。我有一个
使用输入和跨度字段的 Javascript 计算
4000 我需要上面字段 name="quantity" 和 id="price" 中的值，并使用 javascript 函数进行计算，并将其显示在字段 id= 中仅当我单击计算按钮时才显示“总

首页

博学

6Ren·AI

商城

javascript - 需要帮助在本文档末尾显示计算结果