setAttributeで文字を渡すことができるのは一度だけ？

質問

下記のスクリプトで、テキストボックスに文字を入れたのですが、
挿入された文字をdeleteで消した後に、もう一度スクリプトを実行すると文字が挿入されませんでした。
これはどういう理屈で、挿入されないのでしょうか。

hoge = document.getElementById("hogera");
hoge.setAttribute("value", "あああ");

よろしくお願い致します。

回答No.1

x_jouet_x · ベストアンサー

FirefoxのFirebugで確認してみました。

setAttribute()でvalue属性を設定するということは、
<input id="hogera" type="text">
だったものを
<input id="hogera" type="text" value="あああ">
にしているということです。

つまり、このテキストボックスのデフォルト値を「あああ」に設定していることになります。
そのため文字を消してもう１度スクリプトを実行させても何も変わりません。
# デフォルト値「あああ」だったものをデフォルト値「あああ」にしているだけなので…。

ちなみにこの状態でフォームのリセットボタンを押すとデフォルト値が表示されるので、「あああ」の文字が表示されます。

テキストボックス内の値(文字)を操作したいのであれば、
hoge.value = "あああ";
のようにvalueプロパティを使います。

お礼

おお！
こういう書き方をするんですね！勉強になりました！

回答No.2

yambejp

inputのonchangeに指定してみてください。
そうすれば毎回「あああ」が挿入されることがわかると思います
<script>
function funcHOGE(){
hoge = document.getElementById("hogera");
hoge.setAttribute("value", "あああ");
}
</script>

<input onchange="funcHOGE()" id="hogera">

補足

投稿ありがとうございます。
↑こちらのサンプルだとブラウザ上に「あああ」が表示されなくないですか？firebugでみるとvalueに「あああ」は渡っていますが。
ちなみにMac(Fx3)で実行しました。

質問内容は解決しましたが、↑こちらの問題も気になる。。