如何制作 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 所说的。每次用户更改“apples”值时，您都会更改“apples quantity”（“bananas”也是如此）。如果更新了任何苹果/香蕉，您还必须更新“总计”。这就是@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();
      }