How to use "toLowerCase();" in java script

Question

I would like to have inputResult toLowerCase I mean that it would not matter if somebody insert the color name with Lower or Big case. I have been trying this but it does not work:

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

The codepen is here: https://codepen.io/hubkubas/pen/eLvbPZ?editors=1010

Answer 1

You need to do var inputResult = inputColor.value.toLowerCase() and remove .value from all the conditional statement then it will work fine:

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>