Question

我正在尝试运行此代码，除了if语句外，一切似乎都在工作。即使有匹配但它仍然没有显示正确的答案，如代码所示，而是在else语句中显示代码。

＆＃13;

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[3];
var colorDisplay = document.querySelector("#colorDisplay");

colorDisplay.textContent = pickedColor;


for (var i = 0; i < colors.length; i++) {
  //add initial colors to squares
  squares[i].style.background = colors[i];
  //add event listener
  squares[i].addEventListener("click", function() {
    //get color of picked square
    var clickedColor = this.style.background;
    //compare to the pickedColor
    console.log(clickedColor);
    if (clickedColor === pickedColor) {
      alert("COORREECCTT");
    } else {
      alert("WRROONGG!!");
    }
  });
}

＆＃13;

body {
  background-color: #232323;
}

.square {
  width: 30%;
  background-color: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
}

#container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #fff;
}

＆＃13;

<body>
  <h1>The Great <span id="colorDisplay">RGB</span> Color Game</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>
</body>

＆＃13;

Answer 1

＆＃13;

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[3];
var colorDisplay = document.querySelector("#colorDisplay");

colorDisplay.textContent = pickedColor;


for (var i = 0; i < colors.length; i++) {
  //add initial colors to squares
  squares[i].style.background = colors[i];
  //add event listener
  squares[i].addEventListener("click", function() {
    //get color of picked square
    var clickedColor = this.style.background;
    //compare to the pickedColor
    console.log(clickedColor);
    if (clickedColor === pickedColor) {
      alert("COORREECCTT");
    } else {
      alert("WRROONGG!!");
    }
  });
}

＆＃13;

body {
  background-color: #232323;
}

.square {
  width: 30%;
  background-color: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
}

#container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #fff;
}

＆＃13;

<body>
  <h1>The Great <span id="colorDisplay">RGB</span> Color Game</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>
</body>

＆＃13;

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条件中，您要比较两个不同的字符串。当您以rgb()格式应用此颜色时，浏览器会使用颜色参数之间的空格对其进行格式化。

你给了：rgb(0,255,0)
在浏览器中：rgb(0, 255, 0)

因此，您需要在colors数组中添加空格。将颜色数组更改为，

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

破碎＆＃34;如果＆＃34; JavaScript代码中的语句...

2 个答案: