Question

在toLowerCase（）函数中遇到一些问题。我需要在文本区域中编辑文本。我的基本颜色更改功能让用户在文本区域中输入颜色。它使用if语句，并且在我添加toLowerCase（）之前工作正常。

function colourChange() {
   var the_colour = document.forms["formTwo"]["textBox"].value;
   the_colour = the_colour.toLowerCase();

   if(the_colour == "red") {
      document.formOne.textArea.style.color ="red";
   } else if (the_colour == "blue") {
      document.formOne.textArea.style.color ="blue";
   } else if (the_colour == "green") {
      document.formOne.textArea.style.color ="green";
   } else if (the_colour == "yellow") {
      document.formOne.textArea.style.color ="yellow";
   } else {
      alert("Please enter red, blue green or yellow")
   }

我的HTML

<script type="text/javascript" src="file.js">
</script>
<form name="formOne">
<textarea rows="5" cols="45" id="textArea" name="textArea">
</textarea>
</form>

<form name="formTwo">
Colour:<input type="text" name="textBox" value="red, blue, green or yellow.">

有什么想法吗？

Answer 1

使用错误控制台我看到它是语法错误。不应为表单标记指定名称属性。

试试这个：

function colourChange( theForm ) 
{
  var color =
  {
    red : "red", 
    blue  : "blue",
    green : "green",
    yellow : "yellow"

  }[ theForm["textBox"].value.toLowerCase() ];

  color ?  document.getElementById( 'formOne').textArea.style.color = color 
        :  alert("Please enter red, blue, green or yellow");

  return false;  
}

</script>

上面有一个三元语句，然后它在对象上使用关联查找 HTML

<form id="formOne">
<textarea rows="4" cols="50" id="textAreav" name="textArea" style='font-weight:bold;font-size:1.5em'>
TEXT
</textarea>
</form>

<form>
Colour:<input type="text" name="textBox" value="red, blue, green or yellow.">
<button onclick="return colourChange( this.form )">Change Colour</button> </body>
</form>

</html>

最后代码中有2个表单标签，请删除一个。

希望有所帮助

Answer 2

这就是我要做的事情：

HTML ：

<form>
    <textarea rows="5" cols="45" name="textArea"></textarea>
</form>

<form>
    Colour:<input type="text" name="textBox" value="red, blue, green or yellow.">
</form>

如你所见，我没有给表格任何名字。不需要为表格命名。只需命名你的字段。那太好了。

JavaScript：

function colorChange() {
    var color = textBox.value.toLowerCase();

    switch (color) {
    case "red":
    case "blue":
    case "green":
    case "yellow":
        textArea.style.color = color;
        break;
    default:
        alert("Please enter either red, blue, green or yellow.");
    }
}

可以使用名称本身在JavaScript中直接访问命名字段。

功能toLowerCase坏了

2 个答案: