如何在 java 脚本中使用 "toLowerCase();"

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

代码笔在这里：https://codepen.io/hubkubas/pen/eLvbPZ?editors=1010

Answer 1

var inputResult = inputColor.toLowerCase();

toLowerCase 需要 string。所以将 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>

如何在 java 脚本中使用 "toLowerCase();"

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

javascript

lowercase