简单Javascript文件无法正常工作_Javascript_Html_Css_Web

简单Javascript文件无法正常工作

javascript html css web

简单Javascript文件无法正常工作,javascript,html,css,web,Javascript,Html,Css,Web,我正在尝试使用HTML、CSS和Javascript制作一个小游戏 HTML和CSS以及大多数Javascript代码似乎工作正常。然而，当在FireFox中启动程序并尝试单击背景RGB值与存储在变量中的RGB值匹配的方形div时，我得到了错误的答案。假设它向用户发出“正确”的警报，但所有警报都输出“错误” 这是HTML文件 <!DOCTYPE> <html> <head> <title>Color Game</titl

我正在尝试使用HTML、CSS和Javascript制作一个小游戏

HTML和CSS以及大多数Javascript代码似乎工作正常。然而，当在FireFox中启动程序并尝试单击背景RGB值与存储在变量中的RGB值匹配的方形div时，我得到了错误的答案。假设它向用户发出“正确”的警报，但所有警报都输出“错误”

这是HTML文件

    <!DOCTYPE>  
 <html>
<head>
    <title>Color Game</title>
    <link rel="stylesheet" type="text/css" href="colorGame3.css">
</head>
    <body>

        <h1>
        RGB Color Game
        <span id = "colorDisplay">
        RGB
        </span>
        </h1>

        <div id="container">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>

        <script type="text/javascript" src="colorGame3.js"></script>

    </body>
</html>

这是JavaScript文件

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

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

     var pickedColor = colors[2];

    var colorDisplay = document.getElementById("colorDisplay");

      colorDisplay.textContent =  pickedColor;

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

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

squares[i].addEventListener("click",function(){

var clickedColor = this.style.background;

    if(clickedColor === pickedColor){

        alert("Correct");

    }
    else{

        alert("Wrong");
    }
});
}

var颜色=[
“rgb（255,0,0）”，
“rgb（255255,0）”，
“rgb（0255,0）”，
“rgb（0255255）”，
“rgb（0,0255）”，
“rgb（255,0255）”
]
var squares=document.queryselectoral（“.squares”）；
var pickedColor=颜色[2]；
var colorDisplay=document.getElementById（“colorDisplay”）；
colorDisplay.textContent=pickedColor；
对于（var i=0；i您的颜色pickedColor
和clickedColor
不匹配，即使它们“技术上”都在CSS
中工作this.style.background；
在每种颜色之间插入一个空格。它们需要看起来像这样
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)"
    ]

您的if条件不匹配。存在空间
这是警报代码警报（pickedColor+clickedColor）；
你在控制台上看到了什么错误？我想你的问题是你使用的是背景色而不是背景色。但我不确定你是否应该控制台。logpickedColor
和clickedColor
，它们不是相同的值。至少在Chrome中，在Firefox中可能是相同的，该值在命令后用空格格式化从style.backgroundclickedColor=rgb（0,255,0）和pickedColor=rgb（0255,0）获取值时使用分隔符
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)"
    ]