我制作了这个简单的计数器应用程序，html和js代码如下。减少按钮工作正常，每次单击都会将 h1 文本减少 1。重置按钮又回到0。但是当我单击增加按钮时，文本内容从0变为01，然后是011，然后是0111，依此类推。我不明白到底是什么问题。我只是想让它增加1！！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Counter</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Counter</h1>
<h1 id="counter">0</h1>
<button class="btn btn-danger" id="dec">Decrease</button>
<button class="btn btn-warning" id="res">Reset</button>
<button class="btn btn-success" id="inc">Increase</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
const decButton = document.querySelector('#dec')
const resButton = document.querySelector('#res')
const incButton = document.querySelector('#inc')
const counter = document.querySelector('#counter')
resButton.addEventListener('click', () => {
counter.textContent = 0;
})
decButton.addEventListener('click', () => {
counter.textContent -= 1;
})
incButton.addEventListener('click', () => {
counter.textContent += 1;
})
我尝试从箭头函数改为传统函数，我尝试将
.textContent.innerText您在 JavaScript 代码中遇到的增加按钮问题与 JavaScript 处理带有字符串的
+=counter.textContent+= 1要解决此问题，您应该在执行加法之前将
counter.textContentNumber()incButton.addEventListener('click', () => {
counter.textContent = Number(counter.textContent) + 1;
});
通过此更改，
counter.textContent