javascript - 使用javascript更改点击页面背景以匹配点击页面元素的颜色
问题描述
我正在按照这里的教程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);
解决方案
您可以将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!";
}
})
推荐阅读
- maven - Maven依赖:树不显示所有传递依赖
- packet - dumpcap,保存到文本文件和行分隔
- laravel - 如何防止laravel全局变量中的循环
- python - Python Scrapy | 从项目插入 MySQL
- javascript - 页面重定向在 Node Js 和 React JS 上无法使用 Session 进行简单登录
- java - 在 Kotlin 中使用 RecyclerView 转换 Java 代码
- sql - 将每 2 个连续记录合并为 1 个
- python - 根据字典排序列表(初学者)
- jquery - jQuery,阻止表单提交,然后继续
- javascript - React Autosuggest 在点击建议时抛出错误