innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか?
下記のコードを考えてみたのですが、
再取得出来ません。
環境はXPでIE6とFF3です。
ご教授よろしくお願いします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>DOM情報の再取得</title>
<script type="text/javascript" language="JavaScript">
<!--
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;
}
//-->
</script>
</head>
<body>
<div id="test1"></div>
<div id="test2"> </div>
<div id="test3">テスト3</div>
<br>
<a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a>
<a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a>
<a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a>
<script type="text/javascript" language="JavaScript">
<!--
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>
</body>
</html>
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() が再取得となります。
No.3
- 回答日時:
もしかして、やりたかったのは
こういう事ですか?(例によって、過去の他人の解答を勝手に使ってます。)
<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>
ありがとうございました。
再度呼び出さないとダメだという事ですね。
使用する度にinnerHTMLにて設定する必要があるという感じでしょうか?
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様がご提示なさっている通りです。
ありがとうございました。
再度呼び出さないとダメだという事ですね。
使用する度にinnerHTMLにて設定する必要があるという感じでしょうか?
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>
ありがとうございました。
再度呼び出さないとダメだという事ですね。
使用する度にinnerHTMLにて設定する必要があるという感じでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
for文のiを使ってリンク先のア...
-
前のページに戻るとページトッ...
-
2つの配列のソート
-
document.writeで画面が消える
-
引数を渡さずに呼び出し元の変...
-
問題の個数を数える。
-
同じIDで定義した要素の配列を...
-
idを使わずにonclickで自身の要...
-
<a>タグのテキストを取得
-
functionから別のfunctionを実...
-
C#OpenCv V4にのエラーに関する...
-
C#で、ContextMenuStripに動的...
-
C#テキストボックスの文字を配...
-
google apps scriptの終了のさせ方
-
多次元配列から最大値を1行また...
-
VBAでIEのボタンを押してメッセ...
-
window.onloadでのfunction
-
ボタンを押すことでテキストエ...
-
innerHTML実行後のイベント
-
$("body").height();と$("body"...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
なぜ、ジャバスクリプトが表示...
-
○歳△ヶ月と×日を計算してくれる...
-
今日の月と日付の1週間後や3日...
-
javascriptとphpの連携で疑問
-
引数を渡さずに呼び出し元の変...
-
document.clear()の使い方について
-
document.writeで画面が消える
-
文字列を点滅させたい
-
java カレンダーの日付指定で...
-
javaで画像をランダム表示しつ...
-
Java Scriptのメソッドについて
-
面白い!便利!と思った【JavaS...
-
javascriptをはじめて勉強して...
-
htmlの中に記述している画像フ...
-
JavaScriptで前月を算出する方法
-
外部JavaScriptでのd...
-
ウェブ上にキーボードを作りた...
-
条件分岐(IF文)の簡素化
おすすめ情報