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

  checkResultBtn: function() {
    if (document.getElementById("inputResult").value === "") {
      document.getElementById("result").innerHTML = "no value!!!!";
    } else if (document.getElementById("inputResult").value === pickedColor.innerHTML) {
      document.getElementById("result").innerHTML = "BRAVO THAT'S IT!!!";
    } else {
      document.getElementById("result").innerHTML =
        "SOMETHING ELSE is WRONG!!!";
    }
  }

您由于忘记添加.value

而无法正确比较第二个条件

此外，pickedColor是一个html元素，您必须检查它的innerHTML

以上代码有效：）

Answer 2

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

该问题的解决方案是：-

将“ pickedColor”变量声明为全局变量。
或者在定义内部的“ pickedColor”变量时不使用“ var”关键字 “ pickColorBtn”函数默认使它成为全局变量（而不是在“ use 严格”模式。
或在“ 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!!!";
        }
      }
    };

另外，您应该使用：

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

如何将返回的变量与JS中的输入值进行比较？

2 个答案: