Javascript .removechild & .appendchild ne fonctionne pas

StackOverflow https://stackoverflow.com/questions/5984062

Question

J'essaie d'obtenir une fonction JavaScript très simple pour fonctionner qui changera une image pour une autre en utilisant .removechild et .appendChild. Mon code est le suivant:

<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>

Cependant, cela ne fonctionne pas. La page se charge simplement avec Banner.gif et cette image n'est jamais changée en chargement.gif. Je ne peux pas comprendre pourquoi, certains aident les pls ?!

Merci!

Était-ce utile?

La solution

La raison pour laquelle cela ne fonctionne pas est que vous essayez d'ajouter un enfant et de retirer un enfant qui n'est pas un enfant.

Vous essayez de retirer l'enfant nommé Banner de l'élément nommé Banner.

De toute évidence, l'élément nommé Banner n'a pas un enfant nommé Banner. Vous avez deux choix de donner l'identification à l'élément enfant et d'appeler `Banner.parent.removechild (bannière) ou le suivant:

Exemple de snipet

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

bannerElement.removeChild(child);
bannerElement.appendChild(loading);

Autres conseils

Je pense que votre problème est que vous essayez de retirer un enfant qui n'existe pas dans le Banneriement.

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

Voyez comment vous créez une nouvelle image, puis en le supprimant, même si vous ne l'avez pas encore ajouté? Je pense que tu devrais essayer quelque chose comme ceci:

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" />
...
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top