Question

6个框被声明为数组元素。

如果点击了匹配数组[2]的RGB颜色的框，并且if语句提醒else语句提醒“更正” >“错误”如果它与数组元素[2]中的RGB颜色不匹配。

一切似乎都是正确的，但现在任何颜色我点击警告“错误”这并不意味着。因为[2]中包含的框3旨在提醒“正确”。

请帮助我，因为我可以弄清楚为什么它没有显示“正确”，即使我点击分配给[2]的右侧框也是如此。

请问我该怎么做这个帮助？

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
  document.body.classList.toggle('body')
}
click.addEventListener('click', change)

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255,0,0)',
  'rgb(255,255,0)',
  'rgb(25,0,255)',
  'rgb(25,255,203)',
  'rgb(250,0,0)',
  'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
 
// select grids****************************************************
var square = document.querySelectorAll('.square')

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i]
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}

body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}

<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>

Answer 1

通过在点击事件中添加console.log，我在大约30秒内发现了这个问题：

square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    console.log(clickedColor + ' VS ' + picked);
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
});

点击第四个框时的结果为rgb(250, 0, 0) VS rgb(250,0,0)。所以问题是this.style.background;的结果是rgb(250, 0, 0)而你的数组的颜色定义为rgb(250,0,0)，注意间距。因此，简单地修复颜色阵列间距将解决您的问题。

以下是工作示例：

＆＃13;

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button');
function change () {
  document.body.classList.toggle('body');
}
click.addEventListener('click', change);

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255, 0, 0)',
  'rgb(255, 255, 0)',
  'rgb(25, 0, 255)',
  'rgb(25, 255, 203)',
  'rgb(250, 0, 0)',
  'rgb(0, 255, 100)',
];
// picked color****************************************************
var picked = colors[4];
var colourDisplay = document.getElementById('colorDisplay');
colourDisplay.textContent = picked;
 
// select grids****************************************************
var square = document.querySelectorAll('.square');

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i] ;
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}

＆＃13;

body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}

＆＃13;

<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>

＆＃13;

Answer 2

如果您使用某些console.log()，则很容易确定问题。您会看到this.style.background包含更多信息，而不仅仅是背景颜色。

要解决这个问题，我已将其更改为this.style.backgroundColor，但这并没有完全修复它。你必须删除空格键。我是通过使用this.style.backgroundColor.split(" ").join("")

来做到的

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
  document.body.classList.toggle('body')
}
click.addEventListener('click', change)

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255,0,0)',
  'rgb(255,255,0)',
  'rgb(25,0,255)',
  'rgb(25,255,203)',
  'rgb(250,0,0)',
  'rgb(0,255,100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
 
// select grids****************************************************
var square = document.querySelectorAll('.square')

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i]
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.backgroundColor.split(" ").join("");
    if(clickedColor == picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}

body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}

<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>

Answer 3

rbg(255,0,0)的间距存在问题。如果您console.log(this.style.background)，您会注意到rgb(255, 0, 0)后面的空格为,。我还将colors[]中的一个值从rbg(250, 0, 0)更改为rbg(255, 0, 0)，因为我认为这是一个错字。

// toggle button-----------------------------------------------------------------------------------------------------------------------------
var click = document.querySelector('button')
function change () {
  document.body.classList.toggle('body')
}
click.addEventListener('click', change)

// grid coloursm------------------------------------------------------------------------------------------------------------------------------
var colors = [
  'rgb(255, 0, 0)',
  'rgb(255, 255, 0)',
  'rgb(25, 0, 255)',
  'rgb(25, 255, 203)',
  'rgb(255, 0, 0)',
  'rgb(0, 255, 100)',
]
// picked color****************************************************
var picked = colors[4]
var colourDisplay = document.getElementById('colorDisplay')
colourDisplay.textContent = picked
 
// select grids****************************************************
var square = document.querySelectorAll('.square')

// add var colors to var square using array************************
for (var i = 0; i < square.length; i++) {
  // add initial listeners to square
  square[i].style.background = colors[i]
  // add clicked listeners to square 
  square[i].addEventListener('click', function () {
    var clickedColor = this.style.background;
    // console.log("Background: " + this.style.background);
    // console.log("Picked: " + picked);
    if(clickedColor === picked){
      alert('correct');
    } else {
      alert('wrong');
    }
  });
}

body{
    background: #232323;
}

.body{
    background-color: rgb(45, 174, 206);
}

.square{
    width: 30%;
    background: chocolate;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
}

#con{
    max-width: 660px;
    margin: 0 auto;
}

h1{
    color: cornsilk;
    margin: 0 auto;
}

<!DOCTYPE html>
<!-- this game was developed by alabo -->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Game project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="game.css" />
</head>
<body>
    <h1> colour <span id="colorDisplay">RGB</span> color  game</h1>
<div id="con">
    <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>
    <button>click me</button>
    
</body>
<script src="game.js"></script>
</html>

Answer 4

这两个变量没有相同的字符串。拾取的颜色是RGB，数字之间没有空格，单击的颜色有一个带空格的字符串。 Javascript与每个角色进行比较。这就是它失败的原因。点击颜色：“rgb（250,0,0）” 挑选：“rgb（250,0,0）”。检查这个小提琴。我修改了你的代码。 https://fiddle.jshell.net/c3rmLjgj/

如果javascript中的语句没有响应数组元素

4 个答案: