如何通过按钮与onclick实现HTML元素数值递增（解决字符串拼接问题）

核心问题是从innerHTML获取的内容为字符串类型，直接做加法会触发字符串拼接，因此需要先将其转换为数字类型再进行运算，以下是几种实用的实现方式：

方法1：将字符串转换为数字后运算 #

适合简单场景，直接转换DOM内容为数字：

HTML结构：

<div id="counter">0</div>
<button id="addBtn">加1</button>

JavaScript代码：

const counterEl = document.getElementById('counter');
const addBtn = document.getElementById('addBtn');

addBtn.addEventListener('click', () => {
  // 使用parseInt转换为十进制整数，第二个参数10必须指定避免进制歧义
  let currentValue = parseInt(counterEl.innerHTML, 10);
  // 也可以用Number()或一元加号转换：
  // let currentValue = Number(counterEl.innerHTML);
  // let currentValue = +counterEl.innerHTML;
  counterEl.innerHTML = currentValue + 1;
});

方法2：用data属性存储原始数值 #

如果DOM内容可能包含额外字符（如空格），用data-*属性存储纯数值更可靠：

HTML结构：

<div id="counter" data-value="0">0</div>
<button id="addBtn">加1</button>

JavaScript代码：

const counterEl = document.getElementById('counter');
const addBtn = document.getElementById('addBtn');

addBtn.addEventListener('click', () => {
  let currentValue = parseInt(counterEl.dataset.value, 10);
  currentValue += 1;
  // 同时更新显示内容和data属性
  counterEl.innerHTML = currentValue;
  counterEl.dataset.value = currentValue;
});

方法3：用变量缓存数值（性能更优） #

避免频繁读取DOM，直接用变量存储当前数值，适合高频点击场景：

HTML结构同方法1，JavaScript代码：

const counterEl = document.getElementById('counter');
const addBtn = document.getElementById('addBtn');
let currentValue = 0; // 初始值与元素显示保持一致

addBtn.addEventListener('click', () => {
  currentValue += 1;
  counterEl.innerHTML = currentValue;
});

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