Как использовать "toLowerCase ();" в сценарии Java

Question

Я хотел бы иметь inputResult toLowerCase. Я имею в виду, что не имеет значения, если кто-нибудь вставит имя цвета в нижнем или большом регистре. Я пытался это, но это не работает:

checkResultBtn: function() {

    var inputColor = document.getElementById("inputColor");

    var inputResult = inputColor.toLocaleLowerCase();

    var result = document.getElementById("result");

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

Кодовый код здесь: https://codepen.io/hubkubas/pen/eLvbPZ?editors=1010

Answer 1

Вам нужно сделать var inputResult = inputColor.value.toLowerCase() и удалить .value из всех условных операторов, тогда все будет работать нормально:

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

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

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() {

    var inputColor = document.getElementById("inputColor");

    var inputResult = inputColor.value.toLowerCase();

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

#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;
}

<div id="box"></div>
<div>
  <button onclick="colorPicker.pickColorBtn()">Pick a colour</button>

  <div id="pickedColor"></div>
  <div id="result"></div>

  <input id="inputColor" type="text" size="15" placeholder="write the color" />

  <button onclick="colorPicker.checkResultBtn()">Check</button>

Answer 2

var inputResult = inputColor.toLowerCase();

toLowerCase ожидает string . Итак, init inputColor as

var inputColor = document.getElementById("inputColor").value;

тогда ваш inputResult будет строкой, и вам не нужно вызывать свойство value

Решение

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

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

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() {

    var inputColor = document.getElementById("inputColor").value;

    var inputResult = inputColor.toLowerCase();

    var result = document.getElementById("result");

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