type=color输入框切换背景色：第二个输入框失效求助

核心错误点 #

• 事件监听器绑定错误：第二个颜色选择器ColorPicker2被错误绑定到changeColor函数，而非对应的changeColor2函数，导致触发逻辑完全错误。
• 变量赋值错误：ColorCode和ColorCode2被赋值为输入框的当前value（字符串类型），而非DOM元素本身。后续尝试给字符串赋值.value会直接抛出错误，中断代码执行。
• HTML重复ID问题：两个<div>使用了相同的id="inputColor"，违反HTML中ID唯一性规则，可能引发DOM选择冲突。

修复后的完整代码 #

JavaScript代码 #

const ColorPicker = document.querySelector("#input1");
const Body = document.querySelector("#fundoPagina");

const ColorPicker2 = document.querySelector("#input2");
const fundoCaixa = document.querySelector("#fundoCaixa");

// 修改body背景色
const changeColor = (evt) => {
  const selectedColor = evt.currentTarget.value;
  Body.style.backgroundColor = selectedColor;
};

// 修改main背景色
const changeColor2 = (evt) => {
  const selectedColor2 = evt.currentTarget.value;
  fundoCaixa.style.backgroundColor = selectedColor2;
};

// 绑定正确的事件监听器
ColorPicker.addEventListener("input", changeColor);
ColorPicker2.addEventListener("input", changeColor2);

HTML代码（修正重复ID） #

<body id="fundoPagina">
    <div class="inputContent">
        <div class="inputColor"><input type="color" value="#000" id="input1"><p>Cor do fundo da página</p></div>
        <div class="inputColor"><input type="color" value="#000" id="input2"><p>Cor do fundo do texto</p></div>
    </div>
    <main id="fundoCaixa">
        <h1 id="tituloPrincipal">Linguagens de Programação</h1>
        <p id="paragrafo">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.</p>
    </main>
</body>

CSS代码（对应修改选择器） #

.inputContent {
    display: flex; 
    text-align:center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border: 2px solid rgb(66, 66, 66);
    max-width: 890px;
    margin: 0 auto;
    padding: 5px 15px;
    background: rgb(219, 219, 219);
}

.inputColor {
    display: flex;
    flex-direction: column!important;
    align-items: center;
}

.inputColor>p {
    font-size: 12px;
}

#fundoCaixa {
    max-width: 890px;
    margin: 0 auto;
    border: 2px solid rgb(66, 66, 66);
    margin-top: 15px;
    background: rgb(89, 156, 187);
    padding: 5px 15px;
}

修复说明 #

1. 给第二个颜色选择器绑定了正确的changeColor2函数，确保触发修改main背景色的逻辑
2. 移除了无用的ColorCode和ColorCode2变量（颜色选择器会自动同步显示选中颜色，无需手动赋值）
3. 将重复的id="inputColor"改为class="inputColor"，符合HTML规范，避免潜在冲突

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