Ersetzt die Seite mit Bild, anstatt sie hinzuzufügen

Der folgende Code entfernt automatisch alle meine Überschriften und Absätze und lädt nur die fraglichen Bilder. Ich möchte, dass das Bild hinzugefügt wird und nicht den Text ersetzt. Warum passiert das?Ersetzt die Seite mit Bild, anstatt sie hinzuzufügen

<!DOCTYPE html> 
<html> 
<body> 
<h1>My Web Page</h1> 
<p>My paragraph.</p> 
<p id="flipDisplay"></p> 
<button onclick="display()">Flip the Coin!</button> 
<script> 
    function coinFlip() { 
    return (Math.floor(Math.random() * 2) == 0); 
    } 
    function display() { 
    if (coinFlip()) { 
     document.write('<img src="./tflip.png">'); 
    } else { 
     document.write('<img src="./ctflip.png">'); 
    } 
    } 
</script> 
<!--<a><img src=javacript:flip></a> --> 
</body> 
</html>

Quelle

2016-04-01 Russell Bloxwich

was ist '.html()'? – JanLeeYu

Statt document.write verwenden wir das Bild auf ein Element auf dem Bildschirm anhängen können. Ich verwende das id="flipDisplay" Absatz-Tag, um das Bild hier zu halten.

Ich erstelle ein IMG-Element dann mit einer neuen showImage Funktion, um den alten Inhalt von flipDisplay auszulöschen und das neue Ergebnis anzuhängen.

<!DOCTYPE html> 
<html> 
<body> 
<h1>My Web Page</h1> 
<p>My paragraph.</p> 
<p id="flipDisplay"></p> 
<button onclick="display()">Flip the Coin!</button> 
<script> 
    function coinFlip() { 
    return (Math.floor(Math.random() * 2) == 0); 
    } 
    function display() { 
    if (coinFlip()) {  
     var img = document.createElement('img'); 
     img.src = "./tFlip.png";  
     showImage(img);   
    } else {  
     var img = document.createElement('img'); 
     img.src = "./ctflip.png"; 
     showImage(img); 
    } 
    } 

    function showImage(img){ 
     var display = document.getElementById("flipDisplay"); 
     display.innerHTML = ''; 
     display.appendChild(img); 
    } 
</script> 
<!--<a><img src=javacript:flip></a> --> 
</body> 
</html>

ich document.write bin zu vermeiden, da bei der Verwendung, nachdem die Seite geladen ist, wird es das DOM löschen und setzen Sie nur das, was in den Schreib geliefert wurde. Interaktive Seiten neigen dazu, beim Ändern der Seite andere Methoden zu verwenden, wie im obigen Beispiel.

Quelle

2016-04-01 01:28:12 IrkenInvader

Ich denke, die Antwort sollte auch erwähnen, dass, nachdem das DOM erstellt wurde, ein Aufruf von 'document.write' das DOM zurücksetzen und ein Dokument mit nur einem' img' -Tag erzeugen wird. –

Guter Punkt, ich hätte den Wechsel zu einer anderen Strategie erklären sollen. Eine Änderung hinzugefügt. – IrkenInvader

Ersetzt die Seite mit Bild, anstatt sie hinzuzufügen

Antwort

Verwandte Themen