Question

我想将inputResult设置为LowerCase，我的意思是，如果有人用小写或大写形式插入颜色名称，这并不重要。我一直在尝试，但是不起作用：

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.toLowerCase();

toLowerCase需要字符串。因此，将init inputColor设置为

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

Answer 2

您需要执行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>

如何使用“ toLowerCase（）;”在Java脚本中

2 个答案: