innerHTMLによる情報の再取得

2009/10/23 12:10

このQ&Aのポイント

innerHTMLを使用して指定したidタグの情報を変更することは可能ですが、再度取得することはできません。
上記のコードでは、再取得を試みていますが、エラーが発生します。
環境はXPでIE6とFF3であり、再取得が行えないことが確認されています。

takeya4649
お礼率11% (9/78)

JavaScript
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

think49
ベストアンサー率59% (285/482)

2009/10/23 23:02 回答No.4

多分、プログラムの実行順に誤解があるのではないでしょうか？ > document.write("<br><br>\n"+'再取得'+"<br><br>\n"); document.write は呼び出された時点で即実行します。つまり、一番初めに実行されるコードです。 > <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> onClick= は「ユーザがクリックするまで実行されない」ので、document.write より遅れて実行されます。なので、あえて再取得という言い方を取るなら、onclickで実行される setText1() が再取得となります。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

yyr446
ベストアンサー率65% (870/1330)

2009/10/23 14:40 回答No.3

もしかして、やりたかったのはこういう事ですか？（例によって、過去の他人の解答を勝手に使ってます。） <head> <title></title> <script type="text/javascript">  </script> </head> <body> <div id="test1">始め</div> <div id="test2">始め</div> <div id="test3">始め</div> <br> <a href="#" onClick="setText1('セットテスト1');return false;">1</a> <a href="#" onClick="setText2('セットテスト2');return false;">2</a> <a href="#" onClick="setText3('セットテスト3');return false;">3</a> <div id="kakidashi"> </div> </body>

質問者

お礼 2009/10/23 22:39

ありがとうございました。再度呼び出さないとダメだという事ですね。使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/10/23 14:27 回答No.2

質問内容がよくわかりませんが… ＞//エラーになるのでコメントアウトあたりから想像して少しだけ説明を… スクリプトが実行されるタイミングとして、ソースを読込んでいくときに各functionの内容は実行はされません。（onClickで実行される）ソースの終わりのほうのdocument.write～以下は、読込み時に実行されます。まず、リンク要素の後に「再取得」のテキストなどが付け加えられます。次のdocument.write～でtest1～test3の内容を表示していますが、スクリプトが実行されるとき（=初期状態）の各divのtextNodeが評価されて「js_test3=テスト3」のような文字列が作成され、ソースに追加されることになります。結果的に、最初に表示されるソースは初期状態の内容そのまま。（test1の.childNodes[0].nodeValueがエラーになるのは、最初には子要素が無いのでエラーになっているのでしょう）この後、ユーザがリンクをクリックすると対応するfunctionが実行されます。これによって対応するdiv内のtextNodeが書き換えられます。（それで終り）下のほうの「js_test3=テスト3」などのテキストは、操作されていないので当然そのままです。もしも、変えたければ、function内でそこも書き替えてあげる必要があります。値の取得なども含め、あとは#1様がご提示なさっている通りです。

質問者

お礼 2009/10/23 22:39

ありがとうございました。再度呼び出さないとダメだという事ですね。使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？

ログインすると、全ての回答が全文表示されます。

yambejp
ベストアンサー率51% (3827/7415)

2009/10/23 12:21 回答No.1

＞再取得出来ません。の意味がわからないのですが・・・普通に取得できますよね？（もしかして、変更したときに自動でdocument.writeのところに反映できるという勘違い？？） <script> function setText1(data){ document.getElementById("test1").innerHTML = data; return false; } function setText2(data){ document.getElementById("test2").innerHTML = data; return false; } function setText3(data){ document.getElementById("test3").innerHTML = data; return false; } function kakunin(){ alert("test1='"+document.getElementById("test1").innerHTML+"'"); alert("test2='"+document.getElementById("test2").innerHTML+"'"); alert("test3='"+document.getElementById("test3").innerHTML+"'"); } </script> <div id="test1"></div> <div id="test2">　</div> <div id="test3">テスト3</div> <br> <a href="#" onClick="return setText1('セットテスト1');">1</a> <a href="#" onClick="return setText2('セットテスト2');">2</a> <a href="#" onClick="return setText3('セットテスト3');">3</a> <input type="button" value="確認" onclick="kakunin()"> <script> document.write("<br><br>\n"+'再取得'+"<br><br>\n"); //document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n"); document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n"); document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n"); </script>

質問者