textareaの背景を変えたい。

質問

ボタンを押したらテキストボックスに入力された画像のアドレスにテキストエリアの背景画像を変更したいのですが・・・

function imgcha()
{
imgadd=document.form.text.value;
document.f0.textarea.style.backgroundImage=url("http://～～～");
}

こんな感じで作っても上手くいきません。
いろいろ調べてみているのですが、何がおかしいのでしょうか？
よろしくお願いします。

回答No.1

noname#199778 · ベストアンサー

数箇所、訂正箇所があります。

document.f0.textarea.style.backgroundImage=url("http://～～～");

の行ですが、「textarea」というname属性かid属性をtextarea要素につけているのでしょうか? 要素を特定するためのname属性などをきちんと指定しないと、この効果を適用する要素が特定されないと思います。
また、そのあとの「url("http://～～～")」となっている部分ですが、これは未定義の関数として判断されている可能性があります。 JavaScriptから変更するスタイルシートの属性の値として指定する場合には、これらを引用符で囲って、文字列であることを明示する必要があるでしょう。

質問文の例のスクリプトを修正するのであれば、

function imgcha()
{
imgadd=document.f0.text.value;
document.f0.textarea.style.backgroundImage="url('"+imgadd+"')";
}

として、<textarea>要素は

<form name="f0">
<input type="text" name="text" value="画像のURL">
<input type="button" value="OK" onClick="imgcha()">
<br>
<textarea name="textarea" cols="40" rows="5">＜/textarea>
</form>

などと記述する必要があると思います。(注：textarea要素の終止タグは一部をあえて全角で記述してあります。 コピペする場合には注意してください。)
それと、個人的な見解ですが、なるべくなら、要素名と同じ文字列をname属性の値として利用するのは避けたほうが無難のように感じます。

IE 6とNetscape 7では、上記の修正を加えたスクリプトで一応動きました。

参考になれば幸いです。

お礼

遅くなりました。すいません。＾＾；

ありがとうございます。
ついつい面倒でnameの名前をそのまま使ってしまうのですが、これからは気をつけるようにします。

＞これらを引用符で囲って、文字列であることを明示する必要があるでしょう

ものすごく良くわかりました。
""で囲んでみたら上手く作動しました。
本当にどうもありがとうございました。
初心者なのでどうも何がおかしいかが本当にわからなくて困っていました。汗

未定義の関数と認識されていたのですか・・・。
う～ん。
奥が深いです。
これから何かありましたらこのたび教えていただいたことを参考にしていきたいと思います。
ありがとうございました。