gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:56:14 24 4
gpt4 key购买 nike

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

最佳答案

您的颜色 pickedColorclickedColor 不匹配,即使它们“技术上”都适用于 CSSthis.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)"
]

关于javascript - 简单的 Javascript 文件无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36902505/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com