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できないのでしょうか。
どなたかわかる方おしえていただけますでしょうか。
また、どこが悪いのか、など解説も付け加えていただけると幸いです。
