JavaScriptの記述について

2012/04/02 21:16

このQ&Aのポイント

JavaScriptを使った画像切り替えのプログラムで、メイン画像がremoveされずに二回目にremoveされる問題が発生しています。
ボタンをマウスオーバーするとメイン画像が切り替わる機能を実装していますが、一回のremoveChildでメイン画像がremoveできない問題が発生しています。
解決策として、removeChildを二回呼び出すことで問題は解決しますが、なぜ一回のremoveChildではメイン画像がremoveできないのか疑問です。

javascriptの記述について

私は今javascriptを独学で勉強をしていて、勉強した範囲内で自分で作成してみようと思いjavascriptのプログラムを書いています。やりたいこととしてはメイン画像があり、その下に三つボタンを作成し、その三つのボタンのどれか一つにマウスを持っいくとメイン画像が切り替わるという javascriptを作成しています。またその三つのボタンにはそれぞれメイン画像が切り替わるようにイベントをだしています。 html側 <body> <div id="image"> <img src="image/main-image.jpg" /> </div> <div id="bottonbox"> <div id="botton1"> <img src="image/staff01.png" /> </div> <div id="botton2"> <img src="image/staff01.png" /> </div> <div id="botton3"> <img src="image/staff01.png" /> </div> </body> javascript window.addEventListener('load',photo_change,false); function photo_change(event){ var elem = document.getElementById('botton1'); elem.addEventListener('mouseover',botton1,false); elem.document.getElementById('botton2'); elem.addEventListener('mouseover',botton2,false); elem.document.getElementById('botton3'); elem.addEventListener('mouseover',botton3,false); } function botton1(event){ var img_change = document.getElementById('image'); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } ※botton2,3はsrc=画像名だけが違うだけで、botton1関数と同じの為、省略します。これを実行すると、もともとあるメイン画像がremoveされず、下に新しい画像が表示されてしまいます。ブレークポイントをつけてトレースしたのですが、どうやらimg_change.removeChild(img_change.firstChild); でremoveされていないらしくなぜか二回目にremoveされます。ですので、試しに function botton1(event){ var img_change = document.getElementById('image'); //removeChild二回やってみる img_change.removeChild(img_change.firstChild); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } こうするともともとあったメイン画像がremoveされ、botton1にマウスを載せた時に表示させようとしていた画像がちゃんと表示されます。ですが、なぜ一回のimg_change.removeChild(img_change.firstChild);ではメイン画像をremoveできないのでしょうか。どなたかわかる方おしえていただけますでしょうか。また、どこが悪いのか、など解説も付け加えていただけると幸いです。

tomo19860508
お礼率56% (9/16)

JavaScript
回答数2
ありがとう数2

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

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

ベストアンサー

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

2012/04/02 22:23 回答No.1

独学者のお仲間です。＞なぜ一回のimg_change.removeChild(img_change.firstChild);では＞メイン画像をremoveできないのでしょうか div要素内の子要素はタグのある要素だけではなく、テキスト要素も子要素と見做されているからでしょう。ご提示のソースではテキストらしきものは見えませんが、改行なども含めてテキストとされますので、firstChildがテキスト、secondChildが画像要素となっていると想像されます。画像要素を指定してremoveすれば、ご期待の通りになるかと思いますが、この場合はdiv内を空にしてしまえばよいので、　while(img_change.firstChild) img_change.removeChild(img_change.firstchild); のような方法でも解決できるかと思います。しかし、もう少し考えてみると、今回の場合は画像の表示内容を変えるのが目的なので、要素自体を入替えなくとも画像のsrc属性を書換えれば足りるのではないかと思います。　var img_change = document.getElementById('image'); 　var img = img_change.getElementsByTagName("img")[0]; 　img.src = "○○.jpg"; みたいなことで。さらに考えてみると、ご提示のコードだとボタンが増減する毎にスクリプトを何箇所か書換えなければならなくなりますが、この次には、数の影響を受けにくいスクリプトの書き方を考えてみるのもよろしいかもしれません。それによって、個別のidを減らせるでしょうし、コード全体も短くなる可能性もあります。表示対象のURIだけは数の影響を受けますが、配列で定義するとか非表示でHTMLに記載しておくとか…

その他の回答 (1)

lupin-333333
ベストアンサー率31% (294/933)

2012/04/02 23:48 回答No.2

このような場合、どのブラウザで、どのバージョンで検証したのか記載しましょう。そうでないと、正確な回答はえられません。だいたいはＮｏ１さんが説明していただきましたが、クロスブラウザの問題かもしれません。回答者が意識していない場合もありますので（特に質問者さんは意識していないようで）、まずその辺の基本的情報を記載しましょう。これらの問題は、単にDOM操作だけの問題でもないので・・・

質問者

お礼 2012/04/03 21:07

すみませんそうですよねブラウザによってちがいますものね。。今後質問する際はそこも記載して行こうと思います。ありがとうございました。

JavaScriptの記述について

javascriptの記述について

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

その他の回答 (1)

お礼 2012/04/03 21:07

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう