解決済み

<DIV id=""></DIV>勘でいれたら・・・

  • 暇なときにでも
  • 質問No.974897
  • 閲覧数146
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 100% (2/2)

はじめまして。JavaScript初めてです。
わからないことがあるので、教えてください。

画面を左右にフレームで分割して、左フレームのリストボックスから要素を選択すると、その要素に該当した表が右フレームに表示される、というものを作成しました。
左フレーム:name = index
右フレーム:name = main
こんな感じ(左フレーム)↓
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function disp(obj){
右フレームの表のHTML作成をしている

parent.main.document.open();
parent.main.document.write
(desc.innerHtml = 上で作成したHTML);
parent.main.document.close();
}
-->
</SCRIPT>
</HEAD>
<BODY onload="disp(form)">
※<DIV id="desc"></DIV>
<FORM name="form">
<SELECT name="MListBox" onchange="disp(form)">
<xsl: apply-templates select="~"/>
</SELECT>
</FORM>
*<DIV id="desc"></DIV>
</BODY>
</HTML>
  ・
  ・ <xsl文章>
  ・

初めは、※←のところがなく、右と左のフレーム両方に表が出力されてしまっていました。でも※←のところに<DIV id="desc"></DIV>を勘で入れたとたん、右フレームだけに表が出力されるようになりました。(期待の結果)
自分の予想では、*←のところのみで期待の結果が得られる予定で、(disp()でHTMLの出力を右フレームに指定しているから)何故※のところを追加したことで期待通りの動きをしたのかが謎です。

わかりづらい説明で申し訳ないですが、教えてくださる方がいらっしゃいましたら、どうぞお願いします。

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

  • 回答No.1

質問文にあるソースで目指しているものがいまいち掴み切れていないかも知れないので、見当違いなことを書くかもしれませんが…

<DIV id="desc"></DIV>

を複数記述する事で意図した結果になったということですが、それはおそらく記述エラーが元でそうなっているのだと思います。
id名は、各HTML文書内で固有の名前を与える属性として扱われます。 平たく言えば、一つのHTMLファイル内で、一つの要素に与えたid名はその一回しか使えません。 ですので、特定の要素で既に使われているid名を、それとは別の要素に対して与える事が許されていません。
ご質問文のソースの場合、一つのHTML文書内で同じid名が複数の要素に与えられる事になり、一つの特定の要素を絞り込むことができなくなっています。 おそらくは、JavaScriptが特定のid名を持つ一つの要素を取り出そうとし、同じid名を持つ要素が複数あるために特定の要素を識別するのに失敗したせいで、左のフレームに表示されるはずのスクリプトで生成したHTMLソースが、表示先を見失って表示されなくなっているだけだと思われます。(なぜエラーメッセージが出ないのかについては、IEの動作上の問題と言う事になるのではないでしょうか)
試しに、※の部分の<DIV id="desc"></DIV>を残して、*の部分の<DIV id="desc"></DIV>を消し、動作させてみてください。 それで元のように右フレームにだけ表示させたかったHTMLが左フレームにも表示されるようでしたら、一見期待通りの動きになった原因は、上記のように同じid名を複数の要素に与えたという記述ミスと、それから生じたスクリプトの動作不良と言う事になると思います。

ソース的にスマートに目的の動作を確保するのであれば、<DIV id="desc"></DIV>を複数記述するのではなく、スクリプト内の

parent.main.document.open();
parent.main.document.write(desc.innerHtml = 上で作成したHTML);
parent.main.document.close();

この部分の記述を

parent.main.document.open();
parent.main.document.write(上で作成したHTML);
parent.main.document.close();

に直すのが良いと思います。
フレームmainにだけ、スクリプトで生成したHTMLを表示するということが狙いだったのであれば、それまで意図通りの動作をしなかったのは、parent.main.document.write()の中で、「desc.innerHTML =」という記述をしているために、「上で生成したHTML」を、右フレーム内に書き出すのと同時に、descというidを持つ要素(*の<DIV id="desc"></DIV>)の中のHTMLソースとして再定義していたためと思われます。
スクリプトを上のように修正すれば、HTMLソースの書式違反による動作不良ではなく、スクリプトの正常な動作で、右フレームにだけスクリプトで生成したHTMLソースを表示させるという結果を得られると思います。

参考になれば。 見当違いでしたら、ごめんなさい。
お礼コメント
kanan999

お礼率 100% (2/2)

お返事ありがとうございました。
粗末な説明で正確なアドバイスをいただき感謝しています。
上記にあります通り、*の部分を消去し、動作させましたところ、左右両フレームにおいてHTML文章が実行されてしまいましたので、スクリプト内の記述を変更しましたところ、意図した結果となりました。

勉強になりました。本当にありがとうございました。
投稿日時 - 2004-08-27 13:08:21
感謝経済
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数によるOK-チップ配布スタート!

ピックアップ

ページ先頭へ