javascript - JS中如何比较返回的变量和输入值？

Question

我正在学习 JavaScript，今天我正在尝试制作一个小猜谜游戏来学习英语颜色。因此，有一个框可以更改单击时从数组中随机选取的颜色。当盒子改变颜色时，我儿子应该在输入表格中写下呈现的“颜色”并检查。这是我的代码，颜色是随机选择的，盒子改变了颜色。当没有输入时，其写入 - 没有值，但我对正确的颜色有问题，当我输入正确的颜色时，我希望将其写入 Bravo 等。当我比较时，我不知道为什么它不起作用

document.getElementById("inputResult") === pickedColor;

所以我的所有代码如下:

  <style>
    #box {
      width: 50px;
      height: 50px;
      border: 3px black solid;
    }

    .red {
      background: red;
    }

    .purple {
      background: purple;
    }

    .blue {
      background: blue;
    }

    .white {
      background: white;
    }

    .green {
      background: green;
    }

    .brown {
      background: brown;
    }

    .orange {
      background: orange;
    }

    .yellow {
      background: yellow;
    }
  </style>


  <div id="box"></div>
  <button onclick="colorPicker.pickColorBtn()">Pick a colour</button>    
  <div id="pickedColor"></div>
  <div id="result"></div>
  <input id="inputResult" type="text" size="15" placeholder="write the color" />
 <button onclick="colorPicker.checkResultBtn()">Check</button>

和js:

var colors = [
  "red",
  "purple",
  "blue",
  "white",
  "green",
  "brown",
  "orange",
  "yellow"
];

var background = document.getElementById("box");

var colorPicker = {
  pickColorBtn: function() {
    var pickedColor = colors[Math.floor(Math.random() * colors.length)];
    document.getElementById("pickedColor").innerHTML = pickedColor; //just to see what color has been picked
    background.className = pickedColor;
  },
  checkResultBtn: function() {
    if (document.getElementById("inputResult").value === "") {
      document.getElementById("result").innerHTML = "no value!!!!";
    } else if (document.getElementById("inputResult") === pickedColor) {
      document.getElementById("result").innerHTML = "BRAVO THAT'S IT!!!";
    } else {
      document.getElementById("result").innerHTML =
        "SOMETHING ELSE is WRONG!!!";
    }
  }
};

这是一个 CodePen:https://codepen.io/hubkubas/pen/eLvbPZ?editors=1010

所以我非常感谢您的帮助和解释我做错了什么。

Answer 1

您的代码的问题是“pickColorBtn”内的“pickedColor”变量 函数是该函数的本地函数，无法在外部访问。 因此“pickedColor”变量在“checkResultBtn”中不可访问，因此相等 “document.getElementById(“inputResult”) === pickedColor”不成立。 “pickedColor”在“checkResultBtn”函数中是“未定义”。

问题的解决方案是:-

1. 将“pickedColor”变量声明为全局变量。
2. 或者在定义“pickedColor”变量时不要使用“var”关键字“pickColorBtn”函数默认将其设置为全局变量(而不是在“use严格”模式)。

3. 或者在“colorPicker”对象内的任何地方使用“this.pickedColor”。

   这是第一个解决方案:-

    var colors = [      "red",      "purple",      "blue",      "white",      "green",      "brown",      "orange",      "yellow"    ];    var background = document.getElementById("box");    var pickedColor;    var colorPicker = {    pickColorBtn: function() {        pickedColor = colors[Math.floor(Math.random() * colors.length)];        document.getElementById("pickedColor").innerHTML = pickedColor; //just to see         what color has been picked        background.className = pickedColor;      },      checkResultBtn: function() {        if (document.getElementById("inputResult").value === "") {          document.getElementById("result").innerHTML = "no value!!!!";        } else if ((document.getElementById("inputResult").value === pickedColor) ||           (pickedColor === undefined && document.getElementById("inputResult").value ===             "white")) {          document.getElementById("result").innerHTML = "BRAVO THAT'S IT!!!";        } else {          document.getElementById("result").innerHTML =            "SOMETHING ELSE is WRONG!!!";        }      }    };

Also you should compare using:

document.getElementById("inputResult").value === pickedColor