三张图片点击选中逻辑异常：第三张红框无法清除问题排查

核心问题拆解 #

1. 定时器滥用导致逻辑混乱：你用setInterval每16ms重复绑定所有图片的点击事件，这会让事件处理逻辑被频繁覆盖，状态变量被反复重置，第三张图片的边框状态根本无法被正确维护。
2. 状态变量逻辑冲突：点击第三张图片后l_clicked设为true，但前面两个判断分支会强制把l_clicked改为false，等到执行第三张的判断时，d_clicked和k_clicked都是false，又会重新绑定点击事件，导致之前的边框设置直接失效。
3. 边框清除方式不规范：用null重置内联样式不是标准写法，建议用空字符串""或"none"来清除边框。

修正方案 #

完全抛弃定时器的冗余写法，一次性给所有图片绑定点击事件，通过一个变量记录当前选中的元素，点击时统一清除所有边框再给当前元素添加样式，逻辑更清晰且无冲突。

修正后的代码 #

JavaScript

function character_selection() {
  // 获取所有图片元素
  const characterImgs = document.querySelectorAll('#battle_menu img');
  let selectedImg = null;

  // 给每张图片绑定点击事件
  characterImgs.forEach(img => {
    img.addEventListener('click', function() {
      // 清除所有图片的边框
      characterImgs.forEach(item => item.style.border = '');
      // 给当前点击的图片添加红色边框
      this.style.border = 'solid #FF0000';
      selectedImg = this;
    });
  });
}
character_selection();

CSS（无需修改）

#battle_menu {
  background-image: url('obsidian2.jpg');
  max-width: fit-content;
  padding-bottom: 1vh;
  max-height: 90vh;
  border-radius: 2%;
  margin-top: 2vh;
  font-size: large;
}

#battle_menu>div {
  padding-top: 1vh;
  display: flex;
  flex-direction: row;
  max-width: 10vw;
  border-radius: 8%;
}

#warrior_name,
#d_mage_name,
#l_mage_name {
  font-size: 1em;
  color: black;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.441);
  resize: none;
  overflow: hidden;
  margin-top: -1vh;
}

#battle_menu>div>img {
  display: flex;
  flex-direction: row;
  max-width: 10vw;
  border-radius: 15%;
}

HTML（无需修改）

<div id="battle_menu">
  <div><img src="https://placeholder.pics/svg/300x300/B49CFF-BAB3FF/000000/Knight" id="knight_img"></div>
  <div><img src="https://placeholder.pics/svg/300x300/B49CFF-BAB3FF/000000/D" id="d_mage_img"></div>
  <div><img src="https://placeholder.pics/svg/300x300/B49CFF-BAB3FF/000000/L" id="l_mage_img"></div>
</div>

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