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

エラーコンソールを使用すると、構文エラーであることがわかりました。form タグには name 属性を指定しないでください。

これを試して：

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>

上には 3 項ステートメントがあり、オブジェクトに対して連想ルックアップを使用します。
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 つのフォーム タグがあります。1 つ削除してください。

それが役立つことを願っています

于 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 に答える