我正在关注这里的教程 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 应该使变量 block 作用域，因此它们将存在于 的范围内>for 循环。这将允许也在循环内声明的事件监听器关闭每次迭代的唯一值。
我恳求您永远不要再使用var；除了允许您的代码在古老的浏览器中运行之外，与 let 或 const 提供的功能相比，它没有任何可取之处。
关于javascript - 使用 JavaScript 更改单击时的页面背景以匹配单击的页面元素的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60958480/