this.style.background返回错误的值

时间：2016-10-20 04:16:16

标签： javascript html css

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

现在，游戏有两个难度级别。简单而努力。两个级别的代码几乎相同，easy中的颜色div的数量为3，而在硬的情况下，颜色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），但我想知道我做错了什么，以便将来可以避免它。

比你

1 个答案:

答案 0 :(得分：1)

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

  

解释您所看到的奇怪行为的颜色   被记录的是 rgb（35,35,35）。发生了什么是原始的   仍然附加的click事件首先运行，然后转到   声明的其他条件并将其设置为该颜色。 IE浏览器。当你做一个   块消失了。要理解这一点，只需在脑海中贯穿始终   如果这些点击事件一个接一个地执行，就会发生。   首先是努力而不是简单。

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

所以在将来，只需记住在更改状态时清理点击事件。这是在这里学到的教训。

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)];

当您切换到简易模式时，您仍然可以点击隐藏的方块。在简单模式下停用这些方块，以便无法单击它们：

for(var j = 3; j < squares.length; j++) {
    squares[j].removeEventListener("click", squareClicked);
}
相关问题
最新问题