计数器应用点击递增按钮显示01而非1的问题求助

问题根源 #

核心问题出在字符串与数字的类型处理差异：

• 执行counter.textContent -= 1时，JavaScript会自动把字符串类型的文本转换为数字完成减法，再转回字符串赋值，所以递减功能正常。
• 但counter.textContent += 1是字符串拼接操作，"0" + 1会变成"01"，后续每次点击都是在现有字符串后追加1，就出现了011、0111这类不符合预期的结果。

修复方案 #

提供两种可靠的解决方式：

方案1：显式转换文本为数字后运算 #

每次操作时先把DOM文本转成数字，计算完成后再赋值回去：

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 = Number(counter.textContent) - 1;
})

incButton.addEventListener('click', () => {
    counter.textContent = Number(counter.textContent) + 1;
})

方案2：维护独立数值变量（更推荐） #

用变量存储当前计数器数值，操作变量后同步到DOM，避免频繁的类型转换：

const decButton = document.querySelector('#dec')
const resButton = document.querySelector('#res')
const incButton = document.querySelector('#inc')
const counter = document.querySelector('#counter')

let count = 0;

resButton.addEventListener('click', () => {
    count = 0;
    counter.textContent = count;
})

decButton.addEventListener('click', () => {
    count--;
    counter.textContent = count;
})

incButton.addEventListener('click', () => {
    count++;
    counter.textContent = count;
})

补充说明 #

你尝试的箭头函数改传统函数、textContent换innerText都无法解决问题，因为这些操作不影响类型转换的核心逻辑，关键还是要处理字符串转数字的问题。

内容的提问来源于stack exchange，提问作者Big Al