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

时间:2016-04-27 23:10:55

标签: javascript html css web

我正在尝试使用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>

这是CSS文件

    body{
    background-color: #232323;
    }

.square{
width:30%;
background:purple;
padding-bottom:30%;
float:left;
margin:1.66%;

 }

#container{

max-width:600px;
margin:20px auto;
}

这是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");
    }
});
}

2 个答案:

答案 0 :(得分:0)

您的颜色pickedColorclickedColor不匹配,即使它们都是技术上的&#34;在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)"
    ]

答案 1 :(得分:0)

你的if条件不匹配。有空间。

这是警报代码alert (pickedColor + clickedColor); enter image description here