当两值之和等于指定值时移除元素hidden类的实现问题（CSS/HTML/JS）

看起来你的逻辑方向是对的，但大概率是踩了几个前端常见的小坑，我帮你一步步排查修复：

1. 先确认基础：元素与变量是否正确获取 #

首先要确保你已经正确拿到了所有目标元素，比如：

const rangeOne = document.getElementById('rangeOne');
const rangeTwo = document.getElementById('rangeTwo');
const rangeThree = document.getElementById('rangeThree');
const finishPuzzleOne = document.getElementById('finishPuzzleOne');

如果元素ID拼写有误，或者代码执行时DOM还没加载完成（比如script标签放在head里没加DOM加载监听），这些变量会变成null，后续逻辑自然失效。

2. 核心问题：处理字符串转数值的类型错误 #

range输入框的value属性返回的是字符串类型，直接用+号会做字符串拼接而非数值相加！比如rangeThree.value是"2"，rangeTwo.value是"3"，相加结果会是"23"而不是5，这时候和rangeOne.value（比如"5"）比较，"23"=="5"肯定不成立。

必须先把值转成数值，用Number()或者parseInt()都可以：

const sum = Number(rangeThree.value) + Number(rangeTwo.value);
const target = Number(rangeOne.value);
if (sum === target) {
  finishPuzzleOne.classList.remove('hidden');
}

3. 确保逻辑在值变化时触发 #

你的代码如果只执行一次（比如页面加载时），那只有初始值满足条件才会生效。但range是拖动变化的，所以需要给三个range都添加input事件监听，每次值变动时重新判断：

// 把判断逻辑封装成函数
function checkPuzzleCondition() {
  const sum = Number(rangeThree.value) + Number(rangeTwo.value);
  const target = Number(rangeOne.value);
  if (sum === target) {
    finishPuzzleOne.classList.remove('hidden');
  } else {
    // 可选：如果条件不满足时重新隐藏按钮
    finishPuzzleOne.classList.add('hidden');
  }
}

// 给三个range绑定事件，值变就触发判断
rangeOne.addEventListener('input', checkPuzzleCondition);
rangeTwo.addEventListener('input', checkPuzzleCondition);
rangeThree.addEventListener('input', checkPuzzleCondition);

// 页面加载时先执行一次，处理初始值状态
checkPuzzleCondition();

4. 额外检查点 #

• 确认hidden类的CSS规则是否正确，比如是不是display: none;，有没有被更高优先级的样式覆盖。
• 打开浏览器控制台（F12），看看有没有报错，比如变量未定义、元素找不到等，这些都会直接导致逻辑失败。

按照上面的步骤调整后，应该就能正常触发按钮显示的逻辑了！

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