如何用querySelector选择多个元素？副标题颜色修改失效求助

核心问题分析 #

1. 重复ID违反HTML规范：你给两个<div>都用了id="inputColor"，ID在页面中必须唯一，浏览器只会识别第一个，建议改成class。
2. 仅选中单个副标题：document.querySelector("h2")只会获取页面中第一个<h2>元素，要修改所有副标题，得用document.querySelectorAll获取所有匹配元素。
3. 变量赋值错误：ColorCode = document.querySelector("#input1").value把变量存成了颜色值字符串，而非DOM元素，后续ColorCode.value会报错，直接用已获取的ColorPicker和ColorPicker4即可。

修正后的完整代码 #

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="input4"><p>Subtitles Color</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>
        <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
        <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>
    </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 { /* 把#inputColor改成.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;
}

JavaScript（修复选择器和变量问题）

const ColorPicker = document.querySelector("#input1");
const Body = document.querySelector("#fundoPagina");
        
const ColorPicker4 = document.querySelector("#input4");
const subtitulos = document.querySelectorAll(".subtitulo"); // 获取所有副标题元素
        
// 背景色修改函数
const changeColor = (evt) => {
    const selectedColor = evt.currentTarget.value;
    Body.style.backgroundColor = selectedColor;
};
        
// 副标题颜色修改函数
const changeColor4 = (evt) => {
    const selectedColor4 = evt.currentTarget.value;
    // 遍历所有副标题，逐个修改颜色
    subtitulos.forEach(subtitulo => {
        subtitulo.style.color = selectedColor4;
    });
};
        
// 添加事件监听
ColorPicker.addEventListener("input", changeColor);
ColorPicker4.addEventListener("input", changeColor4);

额外说明 #

• 用document.querySelectorAll(".subtitulo")获取所有带subtitulo类的元素，通过forEach遍历修改样式，确保所有副标题都能同步变色。
• 移除了多余的ColorCode和ColorCode4变量，因为颜色选择器的value会自动更新，不需要手动赋值。

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