HTML color picker选色后点击按钮无法改背景色，求解决方案

你的代码存在语法和逻辑问题，导致功能无法生效，具体修正方案如下：

错误点分析 #

• 变量命名非法：JavaScript变量名不能包含连字符，color-selected会被解析为减法运算，需改为合法命名（如selectedColor）
• 运算符使用错误：用了比较运算符==代替赋值运算符=，导致颜色值无法存储、按钮样式无法设置
• 未获取DOM元素：直接使用contact-info-btn会触发报错，必须先通过document.querySelector获取对应按钮元素
• 重复绑定事件：每次选择颜色都给按钮添加点击监听，会导致点击时触发多次回调，只需绑定一次即可

修正后的代码 #

JavaScript 部分 #

function startup() {
  const colorPicker = document.querySelector("#color-picker");
  const contactBtn = document.querySelector("#contact-info-btn");
  let selectedColor = "#000000"; // 设置默认颜色

  // 监听颜色选择变化，更新选中的颜色值
  colorPicker.addEventListener("input", function(event) {
    selectedColor = event.target.value;
  }, false);

  // 只绑定一次按钮点击事件
  contactBtn.addEventListener('click', function(){ 
    contactBtn.style.backgroundColor = selectedColor;
  });
}

// 确保DOM加载完成后执行初始化函数
document.addEventListener('DOMContentLoaded', startup);

HTML 部分 #

<label for="color-picker">Color:</label>
<input type="color" id="color-picker" />
<form method="post" class="homepg-form" id="homepg-form" >
  <!-- 其他表单内容 -->
  <button class="contact-info-btn" id="contact-info-btn" type="button" >İletişim bilgileri</button>
</form>

逻辑说明 #

1. 页面加载完成后再获取DOM元素，避免因元素未渲染导致的获取失败
2. 用变量存储选中的颜色值，颜色选择器变化时实时更新该变量
3. 按钮点击事件仅绑定一次，点击时直接使用存储的颜色值设置背景色

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