- ベストアンサー
innerHTMLによる情報の再取得
- innerHTMLを使用して指定したidタグの情報を変更することは可能ですが、再度取得することはできません。
- 上記のコードでは、再取得を試みていますが、エラーが発生します。
- 環境はXPでIE6とFF3であり、再取得が行えないことが確認されています。
- takeya4649
- お礼率11% (9/78)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （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)
もしかして、やりたかったのは こういう事ですか？（例によって、過去の他人の解答を勝手に使ってます。） <head> <title></title> <script type="text/javascript"> <!-- window.onload = function () { kakidasi(); } function setText1(data){ document.getElementById("test1").innerHTML = data; kakidasi(); } function setText2(data){ document.getElementById("test2").innerHTML = data; kakidasi(); } function setText3(data){ document.getElementById("test3").innerHTML = data; kakidasi(); } function kakidasi(){ (function(newfunc){ var save = document.write; document.write = newfunc; document.write.reset=function(){ document.write = save; } })( function(){ basyo = document.getElementById('kakidashi'); return function(value) { basyo.innerHTML += value; }; }() ); document.write("<br><br>"+'再取得'+"<br><br>"); document.write("js_test1="+document.getElementById("test1").innerHTML+"<br>"); document.write("js_test2="+document.getElementById("test2").innerHTML+"<br>"); document.write("js_test3="+document.getElementById("test3").innerHTML+"<br>"); document.write.reset(); } // --> </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>
- fujillin
- ベストアンサー率61% (1594/2576)
質問内容がよくわかりませんが… ＞//エラーになるのでコメントアウト あたりから想像して少しだけ説明を… スクリプトが実行されるタイミングとして、ソースを読込んでいくときに各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様がご提示なさっている通りです。
お礼
ありがとうございました。 再度呼び出さないとダメだという事ですね。 使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
＞再取得出来ません。 の意味がわからないのですが・・・ 普通に取得できますよね？ （もしかして、変更したときに自動で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>
お礼
ありがとうございました。 再度呼び出さないとダメだという事ですね。 使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？
お礼
ありがとうございました。 再度呼び出さないとダメだという事ですね。 使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？