1

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.">

有任何想法吗？

4

2 回答 2

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 个表单标签，请删除一个。

希望有帮助

于 2013-02-19T11:58:58.867 回答
0

这就是我要做的：

的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 中直接访问命名字段。

于 2013-02-19T12:11:07.697 回答