使用HTML和JavaScript实现增减计数器时遇到错误

嘿，我一眼就瞅出你代码里的两个小问题啦，这就帮你解决：

问题1：减号按钮逻辑错误 #

你写的minus函数里居然写了i += 1——这可不就点减号反而往上涨数值嘛！必须改成i -= 1才能实现“减1”的逻辑。

问题2：缺少显示计数的DOM元素 #

你的JavaScript代码里要更新document.getElementById("demo")的内容，但HTML里完全没有这个id的元素，代码执行时找不到目标，自然没法把计数显示出来。

修正后的完整代码 #

1. 修正后的JavaScript（app.js）

var i = 0; 
const plus = function(){ 
  i += 1; 
  document.getElementById("demo").innerText = i; 
} 
const minus = function(){ 
  i -= 1; // 这里改成减1，实现正确的“移除”逻辑
  document.getElementById("demo").innerText = i; 
}

2. 修正后的HTML

在按钮上方添加一个用来显示计数的元素，初始值设为0：

<!doctype html> 
<html> 
<head> 
<title> interactiveCart.io </title> 
<link rel="stylesheet" href="app.css"> 
<script src="https://kit.fontawesome.com/ecf5b6c191.js" crossorigin="anonymous"></script> 
</head> 
<body> 
<h1> Interactive Cart For Ecommerce Store </h1> 
<div class="container"> 
<img class="center" src="shopping-cart.png" alt="loading" height="300px" width="300px" > 
</br> 
<div class="container2">
<!-- 新增显示计数的元素，id对应JS里的demo -->
<p id="demo">0</p> 
<script src="app.js"></script> 
<button class="button1" onclick="plus();"> Add <i class="fa-solid fa-circle-plus"></i> </button> 
<button class="button2" onclick="minus();"> Remove <i class="fa-solid fa-circle-minus"></i> </button> 
</div> 
</div> 
</body> 
</html>

3. CSS保持不变即可

.container{
  height: 400px; 
  width: 400px; 
  background-color: rgb(240, 168, 221); 
} 
.container2{
  text-align: center; 
} 
.center {
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 50%; 
}

这样修改后，点击Add按钮数值会递增，点击Remove按钮数值会递减，计数会清晰显示在按钮上方啦！

内容的提问来源于stack exchange，提问作者cyber xD