JavaScriptを使用してテキストエリアの背景色を変更する方法

Question

テキストエリアの背景色をテキストボックスに入力した色に変更する方法を知りたいだけです。私は、テキストの色、フォント、サイズを管理することができましたが、同じ方法でバックグラウンドをやってもうまくいかないようです。 テキストの色と背景のための私のコードは次のとおりです。

スクリプト：

function setColor(where, Color) 
    { 
     if (where == "backgroundcolour") 
      document.getElementById('textarea').style.backgroundColor = Color; 
     if (where == "colourtext") 
      document.getElementById('textarea').style.color = Color; 
    } 

HTML：それは背景を変更wouldntのように、私のインターネットは、スクリプトをブロックしたかのように

<p> 
    Card color: <input type = "text" name = "backgroundcolour" 
          size = "10" 
          onchange = "setColor('backgroundcolour', 
               this.value)"> 
    <br> 
    Text color: <input type = "text" name = "colourtext" 
          size = "10" 
          onchange = "setColor('colourtext', 
               this.value)"> 
    <br> 
</p> 
<textarea id = 'textarea' name="data" cols="100" rows="10"> 

</textarea> 

に思える

Answer 1

コードが実際に動作しています。おそらく、変更イベントをトリガするために、テキストボックスからフォーカスを削除するのを忘れていたかもしれません。

function setColor(where, Color) 
 
    { 
 
     if (where == "backgroundcolour") 
 
      document.getElementById('textarea').style.backgroundColor = Color; 
 
     if (where == "colourtext") 
 
      document.getElementById('textarea').style.color = Color; 
 
    }

<p> 
 
    Card color: <input type = "text" name = "backgroundcolour" 
 
          size = "10" 
 
          onchange = "setColor('backgroundcolour', 
 
               this.value)"> 
 
    <br> 
 
    Text color: <input type = "text" name = "colourtext" 
 
          size = "10" 
 
          onchange = "setColor('colourtext', 
 
               this.value)"> 
 
    <br> 
 
</p> 
 
<textarea id = 'textarea' name="data" cols="100" rows="10"> 
 

 
</textarea>