dポイントプレゼントキャンペーン実施中！

javascriptの記述について

解決済

  • 質問者：tomo19860508
  • 質問日時：
  • 回答数：2件

私は今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できないのでしょうか。

どなたかわかる方おしえていただけますでしょうか。
また、どこが悪いのか、など解説も付け加えていただけると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

独学者のお仲間です。




＞なぜ一回の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に記載しておくとか…
    • good
    • 0
    • 件
通報する

No.2

このような場合、どのブラウザで、どのバージョンで検証したのか記載しましょう。



そうでないと、正確な回答はえられません。

だいたいはＮｏ１さんが説明していただきましたが、クロスブラウザの問題かもしれません。回答者が意識していない場合もありますので（特に質問者さんは意識していないようで）、まずその辺の基本的情報を記載しましょう。

これらの問題は、単にDOM操作だけの問題でもないので・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/04/03 21:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報