javascript - //未捕获的错误:选择颜色不是函数 - 我找不到错误
问题描述
一切都很好,直到我调用函数 var pick 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 pick 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
and函数。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>
推荐阅读
- aws-lambda - Node.js 从 dynamoDB 获取项目并传递变量
- r - R正则表达式:匹配两个单词彼此靠近的字符串,但有异常
- neo4j - neo4j 连接有困难
- c# - 通过覆盖 BlazorComponent.BuildRenderTree(RenderTreeBuilder builder) 创建组件
- node.js - node js AT 命令返回 +CMS ERROR: 302
- go - 为什么 Go 在名称解析中查询 /etc/hosts 两次?
- java - Java 模块词汇表
- java - OWLApi:无法创建隐士推理器实例
- gradle - Gradle 不会发出 kotlin.js
- php - 停止将重复条目添加到数据库 PHP SQLITE