点击投票计数器首次点击无响应且百分比显示NaN的原因及解决

安全阿岳

2026-7-26

问题原因分析

除以0错误触发NaN：首次点击时，你先更新了JS里的pikaClick/nineClick，但调用getTotal时，第一步是从vPika和vNine的DOM内容里取数值计算总点击数——这俩元素此时还是初始的0 (0.00%)，parseInt后得到0+0=0，后续计算百分比时用0做除数，直接出现NaN。
依赖DOM存储计数不可靠：你把DOM当作数据容器，每次计算都从DOM里解析数值，不仅容易因为内容格式（比如带百分比）出问题，还会拿到未更新的旧值。

修复方案

核心思路是用JS变量维护真实计数，DOM只负责展示，彻底避免从DOM读取计算用的数值，同时加判断防止除以0。

修复后的JavaScript代码：

// 初始化计数变量
let pikaClick = 0;
let nineClick = 0;
// 标准方式获取DOM元素，避免依赖全局id变量
const pika = document.getElementById('pika');
const nine = document.getElementById('nine');
const vPika = document.getElementById('vPika');
const vNine = document.getElementById('vNine');
const tClicks = document.getElementById('tClicks');

function updateStats() {
  const total = pikaClick + nineClick;
  // 更新总点击数展示
  tClicks.textContent = total;
  
  // 先判断总点击数，避免除以0
  const pikaPercent = total > 0 ? (pikaClick / total) * 100 : 0;
  const ninePercent = total > 0 ? (nineClick / total) * 100 : 0;
  
  // 更新各自的点击数和百分比展示
  vPika.textContent = `${pikaClick} (${pikaPercent.toFixed(2)}%)`;
  vNine.textContent = `${nineClick} (${ninePercent.toFixed(2)}%)`;
}

// 绑定点击事件
pika.addEventListener('click', () => {
  pikaClick++;
  updateStats();
});

nine.addEventListener('click', () => {
  nineClick++;
  updateStats();
});

关键修复点