一切都很好，直到我调用函数var picked color = pickColor（）;为止。我已经分别在控制台中运行功能pickColor（）-正常！！！请帮忙！！！
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="colorGame.css">
<title>Color Game</title>
</head>
<body>
<h1>The <span id= "colorDisplay">Great </span> Colors Game!!!</h1>
<div id="message"></div>
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
<script src = "colorGame.js"></script>
</body>
</html>
的CSS
/*Color Games CSS*/
/*General Styles*/
body {
margin: 0;
padding:0;
background-color: #232323;
}
h1{
color:white;
}
#container {
width:600px;
margin: 0 auto;
}
#message {
color:white;
}
.squares {
width: 180px;
height:190px;
background-color: purple;
float:left;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 40px;
}
Color Games JavaScript-一切都很好，直到我调用函数var picked color = pickColor（）;为止。我已经分别在控制台中运行功能pickColor（）-正常！！！请帮忙！！！
var colors = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
];
// Variables
var squares = document.querySelectorAll(".squares");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var message = document.getElementById("message");
//Display
colorDisplay.textContent = pickedColor;
//test
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = colors[i];
squares[i].addEventListener("click",function(){
var clickedColor = this.style.backgroundColor;
if (clickedColor === pickedColor){
message.textContent = "Right Color";
changeColors(clickedColor);
} else {
this.style.backgroundColor = "#232323";
message.textContent = "Try Again";
}
});
function changeColors(color){
for (i = 0; i < squares.length; i++){
squares[i].style.backgroundColor = color; //
}
}
function pickColor(){
var random = Math.floor(Math.random() * colors.length );
return colors[random];
}
}
最佳答案
在for循环之外定义pickColor和changeColor函数。如果在循环中定义了它们，则无法从外部访问它们。
function changeColors(color) {
for (i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = color; //
}
}
function pickColor() {
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
var colors = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
];
// Variables
var squares = document.querySelectorAll(".squares");
var pickedColor = pickColor()
var colorDisplay = document.getElementById("colorDisplay");
var message = document.getElementById("message");
//Display
colorDisplay.textContent = pickedColor;
//test
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = colors[i];
squares[i].addEventListener("click", function() {
var clickedColor = this.style.backgroundColor;
if (clickedColor === pickedColor) {
message.textContent = "Right Color";
changeColors(clickedColor);
} else {
this.style.backgroundColor = "#232323";
message.textContent = "Try Again";
}
});
}body {
margin: 0;
padding: 0;
background-color: #232323;
}
h1 {
color: white;
}
#container {
width: 600px;
margin: 0 auto;
}
#message {
color: white;
}
.squares {
width: 180px;
height: 190px;
background-color: purple;
float: left;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 40px;
}
C<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="colorGame.css">
<title>Color Game</title>
</head>
<body>
<h1>The <span id="colorDisplay">Great </span> Colors Game!!!</h1>
<div id="message"></div>
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
</body>
</html>