Javascript onclick 函数更改元素的所有实例？

Question

我正在尝试构建一些用户单击按钮的东西，它会更改页面上“部分”元素的所有实例的背景颜色。当我意识到我无法让代码同时更改多个部分时，我将其减少到只有一个部分，但仍然无法使其工作。

这是我的代码的简化版本...

<section id="colorSection">
    <div id="colorWrap" class="wrap">
        <h1>Choose the color you'd like the demo to be in</h1>
        <div id="colorSelector">
            <button id="black" class="colorButton"></button>
            <button id="white" class="colorButton"></button>
        </div>
   </div>
</section>

<script>
var colorSection = document.getElementById('colorSection');
var blackButton = document.getElementById('black');
var whiteButton = document.getElementById('white');
blackButton.onclick = function(){
colorWrap.style.backgroundColor = "#444;"
}
whiteButton.onclick = function(){
colorWrap.style.backgroundColor = "#efefef;"
}
</script>

我的逻辑告诉我......
我已经确定了一个部分并将其转换为变量(“colorWrap”)。
我已经识别了按钮并将它们转换为变量。
我创建了一个在单击按钮时触发的函数，它采用 colorWrap 部分并相应地更改其背景颜色。

显然，这并没有发生。那么，有人可以告诉我在这个例子中哪里出了问题，然后也许可以指出当按钮被按下时能够影响元素的所有实例(而不是我通过其 ID 标识的实例)的方向。点击了？

Answer 1

你的包装变量是错误的(在 onlick 事件中)，十六进制颜色末尾也不应该有 ; :

var colorSection = document.getElementById('colorSection');
var blackButton = document.getElementById('black');
var whiteButton = document.getElementById('white');
blackButton.onclick = function () {
    colorSection.style.backgroundColor = "#444"
}
whiteButton.onclick = function () {
    colorSection.style.backgroundColor = "#efefef"
}

<section id="colorSection">
    <div id="colorWrap" class="wrap">
         <h1>Choose the color you'd like the demo to be in</h1>

        <div id="colorSelector">
            <button id="black" class="colorButton">Black</button>
            <button id="white" class="colorButton">White</button>
        </div>
    </div>
</section>