如何在javascript中使用“toLowerCase（）;”

Question

我想有inputResult toLowerCase我的意思是，如果有人插入颜色名称为Lower或Big case无关紧要。我一直在尝试这个，但它不起作用：

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

codepen在这里：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期望字符串。所以初始化inputColor为

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

那么你的inputResult将很强大，你不需要调用属性值

解

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