我在这里学习教程https://projects.raspberrypi.org/en/projects/cd-beginner-javascript-sushi/8猜一下颜色游戏。最后一部分是在猜测到正确的颜色时更改页面背景的挑战。我已经设法更改了背景，但它只返回页面上最后一个按钮的颜色，而不是正确的按钮。这里有一个代码笔来演示：https://codepen.io/nicdaslick/pen/QWbogQQ.
我知道发生了什么，但不知道如何修复。代码在for循环中，但挑战提示中的建议是更改for循环中的颜色。我该如何获得正确的颜色，还是我想错了？
html:
<body>
<h1>Guess the colour!</h1>
<h2 id="colourValue"></h2>
<div id="buttonWrapper">
<button class="colourButton"></button>
<button class="colourButton"></button>
<button class="colourButton"></button>
<button class="colourButton"></button>
<button class="colourButton"></button>
<button class="colourButton"></button>
</div>
<h2 id="answer"></h2>
<div id="reset"><button id="resetButton">Reset game</button></div>
</body>
css：
.colourButton{
background-color: rgb(255,0,0);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
box-shadow: none;
margin: 10px;
}
#buttonWrapper{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
}
h1{
text-align: center;
}
#colourValue{
margin: 0 auto;
text-align: center;
}
#answer{
margin: 0 auto;
text-align: center;
}
#reset{
margin: 0 auto;
text-align: center;
}
#reset-button{
padding: 10px;
background: none;
border: 1px solid #000;
margin: 10px;
}
js:
function makeColourValue(){
return Math.round(Math.random()*255);
}
function setButtonColour(button, red, green, blue) {
button.setAttribute(
'style',
'background-color: rgb('+ red +','+ green +','+ blue +');'
);
}
var buttons = document.getElementsByClassName('colourButton');
var heading = document.getElementById('colourValue');
var answerMessage = document.getElementById('answer');
function startGame() {
answerMessage.innerHTML = "";
var answerButton = Math.round(Math.random() * (buttons.length - 1));
for(var i = 0; i < buttons.length; i++) {
var red = makeColourValue();
var green = makeColourValue();
var blue = makeColourValue();
setButtonColour(buttons[i], red, green, blue);
if (i === answerButton) {
heading.innerHTML =`(${red}, ${green}, ${blue})`;
}
buttons[i].addEventListener('click', function(){
if (this === buttons[answerButton]) {
answerMessage.innerHTML = "Correct!";
document.body.style.backgroundColor = 'rgb('+ red +','+ green+','+ blue+')';
} else {
answerMessage.innerHTML = "Wrong answer! Guess again!";
}
});
}
}
startGame();
document.getElementById('resetButton').addEventListener('click', startGame);
一个问题是使用var而不是let或const。
当您用var声明一个变量时，它会生成一个函数范围的变量，无论在哪里声明它。因此，在for循环中，red、green和blue在循环的每个迭代中都引用相同的值，而不是在每个循环迭代中都有不同的值。将这些变量视为在startGame函数的顶部被提升和声明的变量。
将其更改为const或let应使变量块作用域，因此它们将存在于for循环的作用域内。这将允许在循环中声明的事件侦听器在每次迭代中关闭唯一的值。
我恳请您不要再使用var；除了允许代码在古老的浏览器中运行之外，它对let或const所提供的功能没有任何可取之处。
您可以将event对象传递给您的函数。然后使用event.target.style访问样式
buttons[i].addEventListener('click', function(event){
if (this === buttons[answerButton]) {
answerMessage.innerHTML = "Correct!";
document.body.style.backgroundColor = event.target.style.backgroundColor
} else {
answerMessage.innerHTML = "Wrong answer! Guess again!";
}
})