调色板选择器颜色更新异常：输入颜色点击按钮后方块无变化

我正在开发一款辅助制作网站调色板的Color Palette Picker，目前遇到一个问题：输入颜色并点击「更新」按钮后，square（颜色方块）无法更新颜色。此前该功能正常——在每个卡片顶部输入颜色，点击输入框旁的油漆桶/更新按钮即可为卡片填充颜色，但现在功能失效，新颜色无法填充到方块中。

相关HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<h1>Color Palette Picker</h1>
<div id="container">
  <div class="square">

    <div class="color-info">
      <span class="color-code" contenteditable>#3498db</span> <button class="change-color-button" style="border 1px;"><i class="fas fa-fill"></i></button><br><br><br><br><br><br><button class="lock-button"><i class="fas fa-unlock"></i></button>
    </div>
  </div>

相关JavaScript代码 #

squares.forEach((square) => {
  // ... 现有代码 ...

  const changeColorButton = square.querySelector(".change-color-button");

  // ... 现有代码 ...

 changeColorButton.addEventListener("click", () => {
    const newColor = colorInput.value;
    updateSquareColor(square, newColor);
  });
});

function updateSquareColor(square, newColor) {
 square.style.backgroundColor = newColor;
 square.querySelector(".color-code").textContent = newColor;
}

  const changeColorButton = square.querySelector(".change-color-button");
  const colorInput = square.querySelector(".color-input");

  changeColorButton.addEventListener("click", () => {
    const newColor = colorInput.value;
    updateSquareColor(square, newColor);
  });
});

已尝试的解决步骤 #

• 验证事件监听器：确认HTML已正确连接监听器
• 验证输入字段：检查每个方块是否关联了color-input输入字段
• 更新JavaScript代码：尝试为每个方块的change-color-button添加事件监听器，获取输入值并调用updateSquareColor函数更新颜色

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