如何正确更新 if 和 else JavaScript 语句中输入元素的值

Question

我现在一直在尝试解决此代码，但没有达到预期的结果

var milo = document.getElementById('milo');
var ovaltine = document.getElementById('ovaltine');
var bournvita = document.getElementById('bournvita');

var miloPrice = 2000.00;
var ovaltinePrice = 1500.00;
var bournvitaPrice = 1850.00;

var milocounter = 0;
var miloAmount = 0;

var ovaltinecounter = 0;
var ovaltineAmount;

var bournvitacounter = 0;
var bournvitaAmount = 0;

milo.addEventListener('click', function(){

    if (milocounter == 0) {
        milocounter += 1;
        miloAmount = miloPrice * milocounter;

        cartdetails.innerHTML += '<tr>' +
            '<td><input type="text" id="formilocounter" value="' + milocounter +'"></td>' +
            '<td><input type="text" id="formiloamount" value="' + miloAmount +'"></td>' +
            '</tr>' + '<br>';

    }

    else {
        milocounter += 1;
        miloAmount = miloPrice * milocounter;
        

        var formilocounter = document.getElementById('formilocounter');
        var formiloamount = document.getElementById('formiloamount');

        formilocounter.value = milocounter;
        formiloamount.value = miloAmount;
        
    }    
});

ovaltine.addEventListener('click', function(){

    if (ovaltinecounter == 0) {
        ovaltinecounter += 1;
        ovaltineAmount = ovaltinePrice * ovaltinecounter;


        cartdetails.innerHTML += '<tr>' +
            '<td><input type="text"  id="forovaltinecounter" value="' + ovaltinecounter +'"></td>' +
            '<td><input type="text" id="forovaltineamount" value="' + ovaltineAmount +'"></td>' +
            '</tr>' + '<br>';
    }

    else {
        ovaltinecounter += 1;
        ovaltineAmount = ovaltinePrice * ovaltinecounter;

       

        var forovaltinecounter = document.getElementById('forovaltinecounter');
        var forovaltineamount = document.getElementById('forovaltineamount');

        forovaltinecounter.value = ovaltinecounter;
        forovaltineamount.value = ovaltineAmount;

    }
});

bournvita.addEventListener('click', function(){
 

    if (bournvitacounter == 0) {
        bournvitacounter += 1;
        bournvitaAmount = bournvitaPrice * bournvitacounter;

        cartdetails.innerHTML += '<tr>' +

            '<td ><input type="text" id="forbournvitacounter" value="' + bournvitacounter +'"></td>' +
            '<td ><input type="text" id="forbournvitaamount" value="' + bournvitaAmount +'"></td>' +
            '</tr>' + '<br>';

    }

    else {
        bournvitacounter += 1;
        bournvitaAmount = bournvitaPrice * bournvitacounter;

        var forbournvitacounter = document.getElementById('forbournvitacounter');
        var forbournvitaamount = document.getElementById('forbournvitaamount');

        forbournvitacounter.value = bournvitacounter;
        forbournvitaamount.value = bournvitaAmount;
    }

});

<article>
    <div id="milo" >
        <img src="images/milo.jfif"><br>
        <label>2,000.00</label>
    </div>
    
    <div id="ovaltine">
        <img src="images/ovaltine.jfif"><br>
        <label >1,500.00</label>
    </div>
    
    <div id="bournvita">
        <img src="images/bournvita.jfif"><br>
        <label>1,850.00</label>
    </div>
</article>

 <div id="cartdetails">

 </div>

当我第一次点击任何商品并将其添加到购物车时，代码工作正常。但当我单击另一个项目时，问题就开始了。前一个项目计数器重置为 1。但是如果我再次单击前一个项目，正确的计数器会重新出现。现在，如果我单击任何新项目，之前的每个项目计数器都会重置为 1，直到我返回单击它们为止。

请问我该如何进行这项工作，以便每当将新商品添加到购物车时，所有商品计数器都将其值保留在值中。谢谢！

Answer 1

问题似乎出在您正在渲染的输入中。即使您正在更新这些输入的值，它们的值也不会在代码片段的 HTML 中更新。 如果您在单击产品项时检查购物车 div，您会发现“值”始终为 1。
我猜发生这种情况是因为您通过

innerHTML

附加来更改购物车，然后使用 HTML 内的值重新呈现 HTML 表示形式。要解决这个特定问题，您应该使用

appendChild

方法。
如果没有明确要求，另一种方法是使用段落而不是输入。

这是一个代码沙箱，我在其中用文本替换了所有这些输入，您会注意到它现在按预期工作：代码沙箱

这是更新后的 script.js 文件：

var milo = document.getElementById("milo");
var ovaltine = document.getElementById("ovaltine");
var bournvita = document.getElementById("bournvita");

var miloPrice = 2000.0;
var ovaltinePrice = 1500.0;
var bournvitaPrice = 1850.0;

var milocounter = 0;
var miloAmount = 0;

var ovaltinecounter = 0;
var ovaltineAmount;

var bournvitacounter = 0;
var bournvitaAmount = 0;

milo.addEventListener("click", function () {
  if (milocounter == 0) {
    milocounter += 1;
    miloAmount = miloPrice * milocounter;

    cartdetails.innerHTML +=
      "<tr>" +
      '<td><p id="formilocounter">' +
      milocounter +
      "</p></td>" +
      '<td><p id="formiloamount" >' +
      miloAmount +
      "</p></td>" +
      "</tr>" +
      "<br>";
  } else {
    milocounter += 1;
    miloAmount = miloPrice * milocounter;

    var formilocounter = document.getElementById("formilocounter");
    var formiloamount = document.getElementById("formiloamount");

    formilocounter.innerHTML = milocounter;
    formiloamount.innerHTML = miloAmount;
  }
});

ovaltine.addEventListener("click", function () {
  if (ovaltinecounter == 0) {
    ovaltinecounter += 1;
    ovaltineAmount = ovaltinePrice * ovaltinecounter;

    cartdetails.innerHTML +=
      "<tr>" +
      '<td><p id="forovaltinecounter">' +
      ovaltinecounter +
      "</p></td>" +
      '<td><p id="forovaltineamount" >' +
      ovaltineAmount +
      "</p></td>" +
      "</tr>" +
      "<br>";
  } else {
    ovaltinecounter += 1;
    ovaltineAmount = ovaltinePrice * ovaltinecounter;

    var forovaltinecounter = document.getElementById("forovaltinecounter");
    var forovaltineamount = document.getElementById("forovaltineamount");

    forovaltinecounter.innerHTML = ovaltinecounter;
    forovaltineamount.innerHTML = ovaltineAmount;
  }
});

bournvita.addEventListener("click", function () {
  if (bournvitacounter == 0) {
    bournvitacounter += 1;
    bournvitaAmount = bournvitaPrice * bournvitacounter;

    cartdetails.innerHTML +=
      "<tr>" +
      '<td><p id="forbournvitacounter">' +
      bournvitacounter +
      "</p></td>" +
      '<td><p id="forbournvitaamount" >' +
      bournvitaAmount +
      "</p></td>" +
      "</tr>" +
      "<br>";
  } else {
    bournvitacounter += 1;
    bournvitaAmount = bournvitaPrice * bournvitacounter;

    var forbournvitacounter = document.getElementById("forbournvitacounter");
    var forbournvitaamount = document.getElementById("forbournvitaamount");

    forbournvitacounter.innerHTML = bournvitacounter;
    forbournvitaamount.innerHTML = bournvitaAmount;
  }
});