如何制作 JavaScript 基本的购物车金额计算器

Question

 <script> var itemquantity, appleamount, appletotalamount, bananaamount, bananatotalamount, gtotalfruits, gtotalfruitss function apple() { var itemquantity = document.getElementById("apple"); var appleamount = document.getElementById("appletotal"); var appletotalamount = itemquantity.value * 50; appleamount.value = appletotalamount; } function banana() { var itemquantity = document.getElementById("banana"); var bananaamount = document.getElementById("bananatotal"); var bananatotalamount = itemquantity.value * 30; bananaamount.value = bananatotalamount; } function grandtotalfruits() { var gtotalfruits = document.getElementById("grandtotalfruitss"); var gtotalfruitss = appletotalamount + bananatotalamount; gtotalfruits.value = gtotalfruitss; } </script> <div class="left"> <p class="fruit11">Apples - <input type="number" id="apple" class="shoppinginput" onChange="apple()" onchange="grandtotalfruits"> Rs.50/Kg</p> <p class="fruit12">Total amount = Rs.<output id="appletotal"></output></p> </div> <div class="left"> <p class="fruit11">Bananas - <input type="number" id="banana" class="shoppinginput" onChange="banana()" onchange="grandtotalfruits"> Rs.30/Kg</p> <p class="fruit12">Total amount = Rs.<output id="bananatotal"></output></p> </div> <div class="grandtotal"> <p class="fruit13">Grand total = Rs.<output id="grandtotalfruitss"></output></p> </div>`

首先输入 type="number" value1 * 100 显示在输出框中，然后输入 type="number" value2 * 100 显示在第二个输出框中，然后添加 value1 和 value2 并显示在输出框 3 中。我正在使用 JavaScript并且是初学者。

你能在阅读问题时看到设计吗？

它适用于 output1 和 output2，但无法为第三个输出框中的 output1 和 output2 的总输出创建正确的方法或函数。

Answer 1

基本上，@dev8989 所说的。 每次用户更改“苹果”值时，您都会更改“苹果数量”（“香蕉”也是如此）。 如果更新了任何苹果/香蕉，您还必须更新“总计”。 这就是@dev8989 的建议：

 var $apples = document.getElementById('apples') var $applesTotal = document.getElementById('apples-total') var $bananas = document.getElementById('bananas') var $bananasTotal = document.getElementById('bananas-total') var $grandTotal = document.getElementById('grand-total') function apple (v) { return 50 * v } function banana (v) { return 30 * v} $apples.addEventListener('change', function() { $applesTotal.textContent = apple($apples.value) $grandTotal.textContent = apple($apples.value) + banana($bananas.value) }) $bananas.addEventListener('change', function() { $bananasTotal.textContent = banana($bananas.value) $grandTotal.textContent = apple($apples.value) + banana($bananas.value) })

 <input type="number" id="apples"> <p>Apples total: <span id="apples-total">0</span></p> <input type="number" id="bananas"> <p>Bananas total: <span id="bananas-total">0</span></p> <p>Grand total: <span id="grand-total">0</span></p>

---

编辑：这是修复了错误的原始代码。 请参阅我关于为什么需要这样做的评论：

 var itemquantity, appleamount, appletotalamount = 0, bananaamount, bananatotalamount = 0, gtotalfruits, gtotalfruitss function apple() { var itemquantity = document.getElementById("apple"); var appleamount = document.getElementById("appletotal"); appletotalamount = itemquantity.value * 50; appleamount.value = appletotalamount; grandtotalfruits(); } function banana() { var itemquantity = document.getElementById("banana"); var bananaamount = document.getElementById("bananatotal"); bananatotalamount = itemquantity.value * 30; bananaamount.value = bananatotalamount; grandtotalfruits(); } function grandtotalfruits() { var gtotalfruits = document.getElementById("grandtotalfruitss"); var gtotalfruitss = appletotalamount + bananatotalamount; gtotalfruits.value = gtotalfruitss; }

 <div class="left"> <p class="fruit11">Apples - <input type="number" id="apple" class="shoppinginput" onChange="apple()" onchange="grandtotalfruits"> Rs.50/Kg</p> <p class="fruit12">Total amount = Rs.<output id="appletotal"></output></p> </div> <div class="left"> <p class="fruit11">Bananas - <input type="number" id="banana" class="shoppinginput" onChange="banana()" onchange="grandtotalfruits"> Rs.30/Kg</p> <p class="fruit12">Total amount = Rs.<output id="bananatotal"></output></p> </div> <div class="grandtotal"> <p class="fruit13">Grand total = Rs.<output id="grandtotalfruitss"></output></p>

Answer 2

在apple()和banana()函数中添加grandtotalfruit() 。

 function apple() {
        var itemquantity = document.getElementById("apple");
        var appleamount = document.getElementById("appletotal");
        var appletotalamount = itemquantity.value * 50;
        appleamount.value = appletotalamount;
        grandtotalfruit();
      }

      function banana() {
        var itemquantity = document.getElementById("banana");
        var bananaamount = document.getElementById("bananatotal");
        var bananatotalamount = itemquantity.value * 30;
        bananaamount.value = bananatotalamount;
        grandtotalfruit();
      }