アラートが間違っていると表示されます。clickedcolorをpickedcolorと比較したい場合、他のロジックはありますか？

debugcn 投稿 Dev

ガビッシュクマール

これは、HTMLページで事前に選択した色（特定の場合はcolor [5]）に対して、正方形の正しい色を選択したかどうかを確認する関数のコードです。

しかし、私はそれをチェックしたので、私はいつも間違った答えを受け取ります。

使っても

var check = (clickedColor === pickedColor);
alert(check);

上記のコードは毎回falseを返します。

ロジックがどこで間違っているのかわかりません。これが私のコードです：-

var colors = [
  "rgb(0,0,255)",
  "rgb(0,255,255)",
  "rgb(255,0,255)",
  "rgb(255,255,0)",
  "rgb(0,255,0)",
  "rgb(255,0,0)"
];

var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var pickedColor = colors[5];
colorDisplay.textContent = pickedColor;
Squaref();


function Squaref() {
  for (var i = 0; i < squares.length; i++) {
    ///////populate
    squares[i].style.background = colors[i];
    ////// check picked colors
    squares[i].addEventListener("click", function() {
      //////grab
      var clickedColor = this.style.background;
      ////////compare
      if (clickedColor === pickedColor) {
        alert(correct);
      } else {
        alert("Wrong");
      }
    });
  };
};

.square {
  width: 25px;
  height: 25px;
}

<div id="colorDisplay"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

rafaelgomesxyz

まず、のthis.style.backgroundColor代わりにを使用する必要がthis.style.backgroundあり、その出力では値（rgb(255, 0, 0)）の間にスペースが含まれるため、colors配列の値にスペースを追加するか、#ff0000形式を使用する必要があります。

そして、あなたは警告する必要があります"correct"、ではありませんcorrect：alert("correct");

var colors = [
  "rgb(0, 0, 255)",
  "rgb(0, 255, 255)",
  "rgb(255, 0, 255)",
  "rgb(255, 255, 0)",
  "rgb(0, 255, 0)",
  "rgb(255, 0, 0)"
];

var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var pickedColor = colors[5];
colorDisplay.textContent = pickedColor;
Squaref();


function Squaref() {
  for (var i = 0; i < squares.length; i++) {
    ///////populate
    squares[i].style.background = colors[i];
    ////// check picked colors
    squares[i].addEventListener("click", function() {
      //////grab
      var clickedColor = this.style.backgroundColor;
      ////////compare
      if (clickedColor === pickedColor) {
        alert("correct");
      } else {
        alert("Wrong");
      }
    });
  };
};

.square {
  width: 25px;
  height: 25px;
}

<div id="colorDisplay"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-8

コメントを追加

サインイン

Related 関連記事

記事