Как сравнить возвращаемую переменную с входным значением в JS?

Question

Я изучаю JavaScript, и сегодня я пытаюсь сделать небольшую игру в догадки для изучения цветов на английском языке. Таким образом, есть окно, которое меняет цвета, случайно выбранные из массива при нажатии. Когда коробка меняет цвет, мой сын должен написать представленный «цвет» в форме ввода и проверить. Вот мой код, цвет выбирается случайным образом, коробка меняет свой цвет. Когда нет ввода, его написано - нет значения, но у меня проблема с правильным цветом, когда я ввожу правильный цвет, я хотел бы, чтобы это было написано Браво и т. Д. Я не знаю, почему это не работает, когда я сравниваю

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!!!";
    }
  }
};

Вот кодовая ручка: https://codepen.io/hubkubas/pen/eLvbPZ?editors=1010

Так что я был бы очень благодарен за вашу помощь и объяснение, что я делаю неправильно.

Answer 1

Проблема с вашим кодом в том, что переменная «pickColor» внутри «pickColorBtn» функция является локальной для этой функции и недоступной снаружи Таким образом, переменная «selectedColor» недоступна в «checkResultBtn» и, следовательно, равенство "document.getElementById (" inputResult ") === selectedColor" не выполняется. «selectedColor» является «неопределенным» внутри функции «checkResultBtn».

Решения проблемы: -

1. Либо объявляйте переменную «selectedColor» глобальной переменной.
2. или не используйте ключевое слово "var" при определении переменной selectedColor внутри Функция «pickColorBtn» делает ее по умолчанию глобальной переменной (пока не используется) строгий режим).

3. или используйте "this.pickedColor" везде внутри объекта "colorPicker".

   Вот первое решение: -

    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

Answer 2

  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

Кроме того, pickColor является HTML-элементом, и вы должны проверить его innerHTML

Над кодом работает:)