使用javascript更改点击页面背景以匹配点击页面元素的颜色

Question

我正在关注这里的教程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);

Answer 1

一个问题是您使用var而不是let或const 。

当您使用var声明变量时，无论您在何处声明它，它都会生成一个函数范围的变量。 因此，在您的 for 循环中， red 、 green和blue都指循环的每次迭代的相同值，而不是每次循环迭代都有不同的值。 将这些变量视为在startGame函数顶部提升和声明的。

将它们更改为const或let应该使变量成为块作用域，因此它们将存在于for循环的范围内。 这将允许您也在循环中声明的事件侦听器在每次迭代时关闭唯一值。

我恳求你永远不要再使用var ； 除了允许您的代码在古老的浏览器中运行之外，它对let或const提供的功能没有任何可取之处。

Answer 2

您可以将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!";
      }
})

使用javascript更改点击页面背景以匹配点击页面元素的颜色

问题描述

2 个解决方案

解决方案1
1 2020-03-31 19:43:19

解决方案2
1 2020-03-31 19:45:53

使用javascript更改点击页面背景以匹配点击页面元素的颜色

问题描述

2 个解决方案

解决方案1 1 2020-03-31 19:43:19

解决方案2 1 2020-03-31 19:45:53

解决方案1
1 2020-03-31 19:43:19

解决方案2
1 2020-03-31 19:45:53