JavaScript投票应用百分比不自动更新问题排查

问题描述 #

开发了一个简单的JavaScript投票应用，预期用户投票后票数及对应百分比会同步更新，但目前遇到百分比无法自动更新的问题：例如总票数为5、赞成票为3时，新增反对票后赞成票百分比未自动更新。

问题根源 #

当前代码的核心问题是：每次点击「Yes」或「No」按钮时，仅更新当前点击选项的票数和百分比，完全未处理另一个选项的百分比重计算。比如点击「No」按钮时，只更新了反对票的数值，赞成票的百分比仍停留在之前的状态，没有根据新的总票数重新计算。

修复后的代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pizza Vote</title>
</head>

<body>
  <fieldset>
    <legend>Do you like pizza?</legend>
    <div id="count">0 (0%)</div>
    <button id="btn">Yes</button>
    <br><br>
    <div id="ncount">0 (0%)</div>
    <button id="Nbtn">No</button>
    <br><br>
    <div id="per"></div>
  </fieldset>
  <script src="main.js"></script>
</body>
</html>

JavaScript部分 #

// 获取DOM元素
const countEl = document.getElementById('count');
const ncountEl = document.getElementById('ncount');
const totalEl = document.getElementById('per');
const yesBtn = document.getElementById('btn');
const noBtn = document.getElementById('Nbtn');

// 投票数据
let yesVotes = 0;
let noVotes = 0;

// 统一更新投票显示的函数
function updateVoteDisplay() {
  const total = yesVotes + noVotes;
  // 计算百分比，避免总票数为0时出现NaN
  const yesPercent = total > 0 ? (yesVotes / total * 100).toFixed(1) : 0;
  const noPercent = total > 0 ? (noVotes / total * 100).toFixed(1) : 0;

  // 更新两个选项的票数和百分比
  countEl.textContent = `${yesVotes} (${yesPercent}%)`;
  ncountEl.textContent = `${noVotes} (${noPercent}%)`;
  // 更新总票数
  totalEl.textContent = `Total votes cast: ${total}`;
}

// 绑定按钮点击事件
yesBtn.addEventListener('click', () => {
  yesVotes++;
  updateVoteDisplay();
});

noBtn.addEventListener('click', () => {
  noVotes++;
  updateVoteDisplay();
});

// 初始化页面显示
updateVoteDisplay();

关键改动说明 #

• 抽离统一更新逻辑：将计算百分比、更新DOM的代码封装到updateVoteDisplay函数中，无论点击哪个按钮，都会触发完整的页面更新，确保两个选项的百分比同步刷新。
• 处理边界情况：添加总票数为0的判断，避免出现NaN的异常显示。
• 优化代码可读性：使用语义化的变量命名，用textContent替代innerHTML（无需HTML内容时更安全高效）。
• 初始化显示：页面加载时调用一次更新函数，保证初始状态正确。

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