javascript - this.style.background 返回错误值

Question

我正在尝试创建一个 RGB 颜色猜谜游戏。前提是每当有人点击一个 div 时，该函数应该检索它的颜色值并将其与给定数量的颜色值中的随机颜色值(预选)相匹配。

现在，游戏有两个难度级别。容易和困难。两个关卡的代码几乎一样，easy的颜色div个数是3，hard的颜色div个数是6。

但是，在简单模式下，该函数正在检索不属于三个 div 中任何一个的颜色值。其实就是返回背景色值。

这是代码

 var colors = randomColors(6);

 var easyColor = [];

 var squares = document.querySelectorAll(".square");

function color() {
 var a = Math.floor(Math.random()*250);
 var b = Math.floor(Math.random()*250);
 var c = Math.floor(Math.random()*250);
 return  "rgb("+ [(a),(b),(c)].join(', ') + ")";
}

function randomColors(num) {
  var arr = [];

  for(var i =0; i < num; i++) {
    arr.push(color());
  }

  return arr;
}
// Tried to generate different set of colors for easy mode. Still working on it.

  for(var x = 0; x < 3; x++) {
    easyColor[x] = color();
  }

var easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)];

// selecting hard difficulty works same as playing again, hence the reload()

document.getElementById("hard").addEventListener("click", function() {
  
  window.location.reload();

});

document.getElementById("reset").addEventListener("click", function() {
  window.location.reload();
});

var squareColor;

// setting up the easy level of the game

document.getElementById("easy").addEventListener("click", function() {

  document.getElementById("header").style.background = "#232323";  

  for(var y = 0; y < 3; y++) {
    squares[y].style.background = easyColor[y];
  }

  for(var z = 3; z < 6; z++) {
    squares[z].style.background = "#232323";
  }
  
  easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)];

  document.getElementById("guess").textContent = easyRandomColor;

// setting up the background colors of easy level squares

  for(var j = 0; j < easyColor.length; j++)
  
  squares[j].addEventListener("click", function() {
    
        squareColor = this.style.background;

        console.log(squareColor, easyRandomColor);
    
        if(squareColor === easyRandomColor) {
      
          document.getElementById("header").style.background = name;

          document.getElementById("display").textContent = "Correct!";

          document.getElementById("reset").textContent = "Play again?";

      
          for(var k = 0; k < easyColor.length; k++) {
            squares[k].style.background = name;
          }

    }   else{
          this.style.background = "#232323";
          document.getElementById("display").textContent = "Try again.";
    }
        
    });

  document.getElementById("easy").classList.add("selected");
  document.getElementById("hard").classList.remove("selected");


});


var randomColor = colors[Math.floor(Math.random()*colors.length)];

//changing the RGB in h1 to rgb of one the squares

document.getElementById("guess").textContent = randomColor; 

//assigning colors to the squares and adding the click event

for(var j = 0; j < squares.length; j++) { 
	
  squares[j].style.background = colors[j];
  
  squares[j].addEventListener("click", function() {
  
  var name = this.style.background;

  // console.log(name, randomColor);
  
  if(name === randomColor) {
  	
    document.getElementById("header").style.background = name;

    document.getElementById("display").textContent = "Correct!";

    document.getElementById("reset").textContent = "Play again?";

    
    for(var k = 0; k < squares.length; k++) {
     squares[k].style.background = name;
    }

  } else{
  	this.style.background = "#232323";
    document.getElementById("display").textContent = "Try again.";
  }
    	
  });
}

body {
	background-color: #232323;
	margin: 0;
}

html {
  margin: 0;
  padding: 0;
}

.square {
	width: 30%;
	/*background: purple;*/
	padding-bottom: 30%;
	float: left;
	margin: 1.66%;
   	transition: 0.2s ease-in;
   	border-radius: 6%;
}

#container {
	margin: 0 auto;
	max-width: 600px;
}

h1, h3 {
  color: white;
  padding-top: 1%;
  padding-bottom: 0.5%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

#header {
  transition: 0.2s ease-in;
}

#nav {
	margin-top: 0;
	padding-top: 0;
	background: white;
	max-width: 100%;
	clear: left;
}

#nav p {
	margin: 0 auto;
	position: relative;
	max-width: 580px;
}

#reset {
	position: relative;
}

#hard {
	position: absolute;
	right: 0;
}

#easy {
	position: absolute;
	right: 50px;
}

#display {
	position: relative;
	left: 27%;
}

<!DOCTYPE html>
<html>
<head>
	<title>RGBA Guess</title>
	<link rel="stylesheet" type="text/css" href="colorgame.css">
</head>
<body>
<div id="header">
  <h3>
    The Great
  </h3>
  
  <h1>
   <span id="guess">number</span>
  </h1>
  
  <h3>
    Guessing Game
  </h3>
</div>

<div id="nav">
    <p>
      <button id="reset">New Colors</button>
      <span id="display"></span>
      <button id="easy">Easy</button>
      <button id="hard" class="selected">Hard</button> 
    </p>
</div>

<div id="container">
  <div class="square" id="sqaure1"></div>
  <div class="square" id="sqaure2"></div>
  <div class="square" id="sqaure3"></div>
	<div class="square" id="sqaure4"></div>
	<div class="square" id="sqaure5"></div>
	<div class="square" id="sqaure6"></div>
</div>
<script type="text/javascript" src="colorgame.js"></script>
</body>
</html>

我知道，有更好的方法来做到这一点。我可以改为在简单模式下调用 randomColors(3)，但我想知道我做错了什么，以便将来避免它。

比你强

Answer 1

函数在简单模式下检索错误颜色的原因是因为您没有从元素中删除困难模式下的点击事件监听器。

To explain the weird behaviour you are seeing where the colour being logged is rgb(35, 35, 35). What is happening is the original click event still attached is running first, and going to the statement's else condition and setting it to that colour. Ie. when you make a block disappear. To understand this just run through in your head what would happen if both those click events executed one after another. First hard than easy.

您要做的是附加一次点击事件，并在全局范围内使用已声明的函数。您可以将其用于轻松点击和硬点击。您想要声明它的原因是您可以使用 removeEventListener 从隐藏的方 block 中移除它。

因此，以后只要记得在更改状态时清理您的点击事件即可。这就是这里要吸取的教训。

JSFiddle 修复了你的错误: https://jsfiddle.net/jx6y0gt1/5/

这是一个固定的代码片段:

var colors = randomColors(6);

var easyColor = [];

var squares = document.querySelectorAll(".square");

function color() {
  var a = Math.floor(Math.random() * 250);
  var b = Math.floor(Math.random() * 250);
  var c = Math.floor(Math.random() * 250);
  return "rgb(" + [(a), (b), (c)].join(', ') + ")";
}

function randomColors(num) {
    var arr = [];

    for (var i = 0; i < num; i++) {
      arr.push(color());
    }

    return arr;
  }
  // Tried to generate different set of colors for easy mode. Still working on it.

for (var x = 0; x < 3; x++) {
  easyColor[x] = color();
}

var easyRandomColor = easyColor[Math.floor(Math.random() * easyColor.length)];

// selecting hard difficulty works same as playing again, hence the reload()

document.getElementById("hard").addEventListener("click", function() {

  window.location.reload();

});

document.getElementById("reset").addEventListener("click", function() {
  window.location.reload();
});

var squareColor;

// setting up the easy level of the game

document.getElementById("easy").addEventListener("click", function() {

  document.getElementById("header").style.background = "#232323";

  for (var y = 0; y < 3; y++) {
    squares[y].style.background = easyColor[y];
  }

  for (var z = 3; z < 6; z++) {
    squares[z].style.background = "#232323";
    squares[z].removeEventListener("click", squareClicked);
  }

  randomColor = easyColor[Math.floor(Math.random() * easyColor.length)];

  document.getElementById("guess").textContent = easyRandomColor;
  document.getElementById("easy").classList.add("selected");
  document.getElementById("hard").classList.remove("selected");
});


var randomColor = colors[Math.floor(Math.random() * colors.length)];

//changing the RGB in h1 to rgb of one the squares

document.getElementById("guess").textContent = randomColor;

//assigning colors to the squares and adding the click event

for (var j = 0; j < squares.length; j++) {

  squares[j].style.background = colors[j];

  squares[j].addEventListener("click", squareClicked);
}

function squareClicked() {
  var name = this.style.background;

  // console.log(name, randomColor);

  if (name === randomColor) {

    document.getElementById("header").style.background = name;

    document.getElementById("display").textContent = "Correct!";

    document.getElementById("reset").textContent = "Play again?";


    for (var k = 0; k < squares.length; k++) {
      squares[k].style.background = name;
    }

  } else {
    this.style.background = "#232323";
    document.getElementById("display").textContent = "Try again.";
  }
}

body {
  background-color: #232323;
  margin: 0;
}
html {
  margin: 0;
  padding: 0;
}
.square {
  width: 30%;
  /*background: purple;*/
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
  transition: 0.2s ease-in;
  border-radius: 6%;
}
#container {
  margin: 0 auto;
  max-width: 600px;
}
h1,
h3 {
  color: white;
  padding-top: 1%;
  padding-bottom: 0.5%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}
#header {
  transition: 0.2s ease-in;
}
#nav {
  margin-top: 0;
  padding-top: 0;
  background: white;
  max-width: 100%;
  clear: left;
}
#nav p {
  margin: 0 auto;
  position: relative;
  max-width: 580px;
}
#reset {
  position: relative;
}
#hard {
  position: absolute;
  right: 0;
}
#easy {
  position: absolute;
  right: 50px;
}
#display {
  position: relative;
  left: 27%;
}

<body>
  <div id="header">
    <h3>
    The Great
  </h3>

    <h1>
   <span id="guess">number</span>
  </h1>

    <h3>
    Guessing Game
  </h3>
  </div>

  <div id="nav">
    <p>
      <button id="reset">New Colors</button>
      <span id="display"></span>
      <button id="easy">Easy</button>
      <button id="hard" class="selected">Hard</button>
    </p>
  </div>

  <div id="container">
    <div class="square" id="sqaure1"></div>
    <div class="square" id="sqaure2"></div>
    <div class="square" id="sqaure3"></div>
    <div class="square" id="sqaure4"></div>
    <div class="square" id="sqaure5"></div>
    <div class="square" id="sqaure6"></div>
  </div>
</body>

我所做的改变

将此添加到代码的底部:

function squareClicked() {
    var name = this.style.background;

  // console.log(name, randomColor);

  if(name === randomColor) {

    document.getElementById("header").style.background = name;

    document.getElementById("display").textContent = "Correct!";

    document.getElementById("reset").textContent = "Play again?";


    for(var k = 0; k < squares.length; k++) {
     squares[k].style.background = name;
    }

  } else{
    this.style.background = "#232323";
    document.getElementById("display").textContent = "Try again.";
  }
}

像这样将它用作您的元素的监听器:

for(var j = 0; j < squares.length; j++) { 

  squares[j].style.background = colors[j];

  squares[j].addEventListener("click", squareClicked);
}

在切换到简单模式时，从简单颜色设置 randomColor 的值，并删除循环以重新附加点击事件，它们已经存在。

randomColor = easyColor[Math.floor(Math.random()*easyColor.length)];

还有一个次要错误，当您切换到简单模式时您仍然可以单击隐藏的方 block 。在简单模式下停用这些方 block ，使它们无法被点击:

for(var j = 3; j < squares.length; j++) {
    squares[j].removeEventListener("click", squareClicked);
}