Question

我正在尝试使用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");
    }
});
}

Answer 1

您的颜色pickedColor和clickedColor不匹配，即使它们都是技术上的＆＃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)"
    ]

Answer 2

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

这是警报代码alert (pickedColor + clickedColor);

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

2 个答案: