HTML/CSS/JS正方形点击无法变色：实现点击切换背景色求助

问题分析 #

你的代码存在几个关键问题导致无法实现点击切换：

• 函数名不匹配：HTML中调用的changeColor()与JS定义的changeBackgroundColor不一致
• 样式操作语法错误：event.style.changeBackgroundColor不是合法的DOM样式属性，正确应为element.style.backgroundColor
• 仅第一个方块绑定了点击事件，其余方块无交互逻辑
• 缺少“恢复原背景色”的切换逻辑

修正后的完整代码 #

HTML

<div class="square" id="D14" style="background-color: #eee1c6;"></div>
<div class="square" id="E14" style="background-color: #00a881;"></div>
<div class="square" id="F14" style="background-color: #eee1c6;"></div>
<div class="square" id="G14" style="background-color: #00a881;"></div>
<div class="square" id="H14" style="background-color: #eee1c6;"></div>
<div class="square" id="I14" style="background-color: #00a881;"></div>
<div class="square" id="J14" style="background-color: #eee1c6;"></div>
<div class="square" id="K14" style="background-color: #00a881;"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  place-items: center;
  justify-content: center;
  overflow-x: hidden;
  height: 100vh;
}

.container {
  display: grid;
  place-items: center;
  justify-content: center;
}

.div {
  display: flex;
  justify-content: center;
}

#cont {
  display: grid;
  grid-template-columns: 1fr;
}

.square {
  margin: .5px;
  width: 60px;
  height: 60px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
  list-style: none;
  display: grid;
  place-items: center;
  font-size: 0;
  cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
}

JavaScript

// 获取所有方块元素
const squares = document.querySelectorAll('.square');

// 给每个方块绑定点击事件
squares.forEach(square => {
  // 存储初始背景色到元素的dataset属性中
  square.dataset.originalColor = square.style.backgroundColor;
  
  square.addEventListener('click', function() {
    // 判断当前背景色是否为目标颜色（#e3ff17对应的RGB值）
    if (this.style.backgroundColor === 'rgb(227, 255, 23)') {
      // 恢复原背景色
      this.style.backgroundColor = this.dataset.originalColor;
    } else {
      // 设置目标背景色
      this.style.backgroundColor = '#e3ff17';
    }
  });
});

关键改进点 #

• 批量绑定事件：使用querySelectorAll获取所有方块，循环添加点击监听，无需逐个写onclick
• 存储原颜色：利用dataset属性保存每个方块的初始背景色，避免浏览器自动转换颜色格式导致的判断错误
• 切换逻辑：通过判断当前背景色实现双向切换，点击时在原颜色和目标颜色之间切换
• 交互提示：给.square添加cursor: pointer，明确提示元素可点击

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