我正在尝试制作RGB颜色猜测游戏。
第一次运行时工作正常。在第二次使用“新游戏”按钮时，应生成新的pickedColor和一组随机颜色。即使每次都会生成新的pickedColor（在第30行中进行了检查），但pickedColor的值又变回了第42行的先前值。
为什么会这样呢？如何在第30行和第42行获得相同的pickedColor值？
function getRandomColor() {
var arr = [];
var r = 0,
g = 0,
b = 0;
var temp;
for (var i = 0; i < 6; i++) {
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
arr[i] = "rgb(" + r + ", " + g + ", " + b + ")";
}
return arr;
}
function pickColor(colors) {
var num = Math.floor(Math.random() * colors.length);
return num;
}
function newGame() {
var colors = getRandomColor();
var colorTile = document.querySelectorAll(".colorTile");
var pickedColor = colors[pickColor(colors)];
console.log(pickedColor);
console.log(colors);
var rgbDisplay = document.querySelector("#rgbDisplay");
var h1 = document.querySelectorAll("h1");
rgbDisplay.textContent = pickedColor;
for (var i = 0; i < colorTile.length; i++) {
colorTile[i].style.backgroundColor = colors[i];
colorTile[i].addEventListener("click", function() {
console.log(pickedColor);
if (pickedColor === this.style.backgroundColor) {
h1[1].textContent = "Correct";
for (var j = 0; j < colorTile.length; j++) {
colorTile[j].style.backgroundColor = this.style.backgroundColor;
}
} else {
h1[1].textContent = "Incorrect";
this.style.backgroundColor = "black";
}
});
}
}
newGame();
var button = document.querySelectorAll("button");
button[0].addEventListener("click", function() {
var h1 = document.querySelectorAll("h1");
h1[1].textContent = "Click On Tile"
newGame();
});#container {
width: 600px;
height: 400px;
margin: 0px auto;
}
.colorTile {
background-color: red;
width: 30%;
margin: 1.6%;
padding-bottom: 30%;
float: left;
}
body {
background-color: black;
}
h1 {
color: yellow;
text-align: center;
}
button {
width: 20%;
height: 30px;
margin: 30px;
margin-left: 40%;
color: black;
background-color: yellow;
}
HTML<!DOCTYPE html>
<html lang="en" dir="ltr">
<link href="../css/ex160.css" rel="stylesheet">
<script defer src="../JavaScript/ex160.js"></script>
<head>
<meta charset="utf-8">
<title>Color Game</title>
</head>
<body>
<h1>The Great <span id="rgbDisplay">RGB</span> Game</h1>
<div id="container">
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
<div class="colorTile"></div>
</div>
<h1>Click On Tile</h1>
<button class="restart"><em>New Game</em></button>
</body>
</html>最佳答案
您将用此行绑定对colorTile元素的多次单击。
colorTile[i].addEventListener("click", function()
尝试removeEventListener，然后像这样添加新的removeEventListener
function getRandomColor()
{
var arr = [];
var r=0, g=0, b=0;
var temp;
for(var i=0; i<6; i++)
{
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
arr[i] = "rgb("+r+", "+g+", "+b+")";
}
return arr;
}
function pickColor(colors)
{
var num = Math.floor(Math.random() * colors.length);
return num;
}
var pickedColor = '';
var colorTile = document.querySelectorAll(".colorTile");
function newGame()
{
var colors = getRandomColor();
pickedColor = colors[pickColor(colors)];
console.log(pickedColor);
console.log(colors);
var rgbDisplay = document.querySelector("#rgbDisplay");
h1 = document.querySelectorAll("h1");
rgbDisplay.textContent = pickedColor;
for(var i=0; i<colorTile.length; i++)
{
colorTile[i].style.backgroundColor = colors[i];
colorTile[i].removeEventListener('click', fn)
colorTile[i].addEventListener("click", fn);
}
}
function fn (){
console.log(pickedColor);
if(pickedColor === this.style.backgroundColor)
{
h1[1].textContent = "Correct";
for(var j=0; j<colorTile.length; j++)
{
colorTile[j].style.backgroundColor = this.style.backgroundColor;
}
}
else{
h1[1].textContent = "Incorrect";
this.style.backgroundColor = "black";
}
}
newGame();
var button = document.querySelectorAll("button");
button[0].addEventListener("click", function(){
var h1 = document.querySelectorAll("h1");
h1[1].textContent = "Click On Tile"
newGame();
});
关于javascript - 变量在函数内部更改其值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50306673/