0

.removeChild と .appendChild を使用して、ある画像を別の画像に変更する非常に単純な Javascript 関数を機能させようとしています。私のコードは次のとおりです。

<html> 
<head> 
<script type="text/javascript" language="javascript"> 
function bannerload(){

var banner = new Image();
banner.src = "IMG/banner.gif";

var loading = new Image();
loading.src = "IMG/loading.gif";

var bannerElement = document.getElementById("BANNER");

bannerElement.removeChild(banner);
bannerElement.appendChild(loading);
}
</script> 
</head> 

<body onload="bannerload()"> 
<div id="BANNER">
<img src="IMG/banner.gif" alt="Banner" />
</div> 
</body> 
</html>

しかし、それは機能していません。ページは banner.gif で読み込まれるだけで、この画像が loading.gif に変更されることはありません。理由がわかりません。助けてください。

ありがとう！

4

2 に答える 2

2

これが機能しない理由は、子を追加し、子ではない子を削除しようとしているためです。

BANNERという名前の要素からBANNERという名前の子を削除しようとしています。

明らかに、BANNERという名前の要素には、bannerという名前の子がありません。子要素にIDを指定して`banner.parent.removeChild（banner）を呼び出すか、次の2つの選択肢があります。

スニペットの例

var bannerElement = document.getElementById("BANNER");
//Banner only has one child.
var child = bannerElement.children[0];

bannerElement.removeChild(child);
bannerElement.appendChild(loading);
于 2011-05-12T20:37:01.817 に答える
0

あなたの問題は、bannerElementに存在しない子を削除しようとしていることだと思います。

var banner = new Image();
banner.src = "IMG/banner.gif";
...
bannerElement.removeChild(banner);

まだ追加していなくても、新しい画像を作成してから削除する方法を確認してください。私はあなたがこのようなことを試みるべきだと思います：

var banner = document.getElementById('id_banner')
banner.src = 'IMG/banner.gif' // or 'IMG/loading.gif' depending on which one you want
...
<body onload="bannerload()"> 
    <div id="BANNER">
        <img id="id_banner" src="IMG/banner.gif" alt="Banner" />
...
于 2011-05-12T20:38:48.443 に答える