html 为什么点击按钮时不增加?[关闭]

ljo96ir5  于 2023-04-10  发布在  其他
关注(0)|答案(1)|浏览(137)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
4天前关闭。
Improve this question
我尝试创建一个购物列表,当用户单击“添加”按钮时,项目的价格会增加,当单击“减少”按钮时,价格会减少。然而,我遇到了一个问题,当单击按钮时什么也没有发生。下面是我的实现尝试:
菜单是

eggs:2.75
milk: 2.84
juice: 4.20

HTML

<td><button onclick="addCount('milk-count');addamount('milkcost'); ">+</button></td>
            <td><button onclick="removeCount('milk-count')">-</button></td>

JS

/*add count to list*/
        
        function addCount(countId) {
            var count = document.getElementById(countId);
            count.innerHTML = parseInt(count.innerHTML) + 1;
        }

/*remove count to list*/

        function removeCount(countId) {
            var count = document.getElementById(countId);
            var currentCount = parseInt(count.innerHTML);
            if (currentCount > 0) {
                count.innerHTML = currentCount - 1;
            }
        }

/*add price form menu*/
        function addamount(item_cost) {
            var count = document.getElementById(item_cost);
            count.innerHTML = parseInt(count.innerHTML) + item_cost_price;
        }
        
/*clear count chart*/
        function clearCounts() {
            var counts = document.querySelectorAll('td[id$="-count"]');
            counts.forEach(function(count) {
                count.innerHTML = '0';
            });
        }
        
/*sends the total */
        function submitCounts() {
            var milkCount = document.getElementById('milk-count').innerHTML;
            var eggsCount = document.getElementById('eggs-count').innerHTML;
            var juiceCount = document.getElementById('juice-count').innerHTML;
            var total = milkCount + juiceCount + eggsCount;
            alert('Milk: ' + milkCount + '\nEggs: ' + eggsCount + '\nJuice: ' + juiceCount + "\nTotal:" + total);
        }

为什么点击按钮时不增加或减少

deikduxw

deikduxw1#

有几点需要修正
1.你的item_cost_price是未定义的,在这个例子中,我假设你在某个DOM元素中有这个值,所以我用这个const item_cost_price = Number(document.getElementById("milk-item-cost").innerHTML);从它那里得到值,并将其成本保存为全局值。如果不是这样,那么你可以用其他方式定义价格的值,但在这个例子中,让我们这样做。
1.你有一个addamount()函数来获得特定项目的总价,但你没有一个函数来从总价中减去价值,所以我添加了它,并在<td><button onclick="removeCount('milk-count'); decrementamount('milkcost')">-</button></td>中调用它
1.使用parseFloat而不是parseInt,因为parseInt将舍入数字,当按下按钮时,您将无法获得正确的总额。

const item_cost_price = Number(document.getElementById("milk-item-cost").innerHTML);
/*add count to list*/

function addCount(countId) {
  var count = document.getElementById(countId);
  count.innerHTML = parseInt(count.innerHTML) + 1;
}

/*remove count to list*/

function removeCount(countId) {
  var count = document.getElementById(countId);
  var currentCount = parseFloat(count.innerHTML);
  if (currentCount > 0) {
    count.innerHTML = currentCount - 1;
  }
}

/*add price form menu*/
function addamount(item_cost) {
  var count = document.getElementById(item_cost);
  count.innerHTML = parseFloat(count.innerHTML) + item_cost_price;
}

/*decrement price form menu*/
function decrementamount(item_cost) {
  var count = document.getElementById(item_cost);
  var currentAmount = parseFloat(count.innerHTML);
  if (currentAmount > 0) {
    count.innerHTML = parseFloat(count.innerHTML) - item_cost_price;
  }

}

/*clear count chart*/
function clearCounts() {
  var counts = document.querySelectorAll('td[id$="-count"]');
  counts.forEach(function(count) {
    count.innerHTML = '0';
  });
}

/*sends the total */
function submitCounts() {
  var milkCount = document.getElementById('milk-count').innerHTML;
  var eggsCount = document.getElementById('eggs-count').innerHTML;
  var juiceCount = document.getElementById('juice-count').innerHTML;
  var total = milkCount + juiceCount + eggsCount;
  alert('Milk: ' + milkCount + '\nEggs: ' + eggsCount + '\nJuice: ' + juiceCount + "\nTotal:" + total);
}
<div id="milk-count">0</div>
<div id="milkcost">0</div>
<span>Price for current item</span>
<div id="milk-item-cost">2.84</div>
<td><button onclick="addCount('milk-count');addamount('milkcost'); ">+</button></td>
<td><button onclick="removeCount('milk-count'); decrementamount('milkcost')">-</button></td>

相关问题