JavaScript .removechild & .appendchild non funziona
-
12-11-2019 - |
Domanda
Sto cercando di ottenere una funzione JavaScript molto semplice per lavorare che cambierà un'immagine per un altro usando .removechild e .appendchild.Il mio codice è il seguente:
<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>
.
Tuttavia, non funziona.La pagina si carica appena con banner.gif e questa immagine non viene mai modificata in caricamento .gif.Non riesco a capire perché, alcuni aiutano Pls ?!
Grazie!
Soluzione
Il motivo per cui questo non funziona è che stai cercando di aggiungere un bambino e rimuovere un bambino che non è un bambino.
Si sta tentando di rimuovere il bambino denominato Banner dall'elemento denominato Banner.
Ovviamente l'elemento denominato Banner non ha un figlio nominato Banner.Hai due scelte o dare l'ID all'elemento figlio e chiama "Banner.Parent.removechild (Banner) o quanto segue:
Snippet di esempio
var bannerElement = document.getElementById("BANNER");
//Banner only has one child.
var child = bannerElement.children[0];
bannerElement.removeChild(child);
bannerElement.appendChild(loading);
. Altri suggerimenti
Penso che il tuo problema sia che stai cercando di rimuovere un bambino che non esiste nell'annerellement.
var banner = new Image();
banner.src = "IMG/banner.gif";
...
bannerElement.removeChild(banner);
.
Guarda come stai facendo una nuova immagine e poi lo rimuovi, anche se non l'hai ancora aggiunto?Penso che dovresti provare qualcosa del genere:
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" />
...
.