Sayfayı, resim yerine görüntülüyor yerine ekler

Aşağıdaki kod, tüm Başlıklarımı ve Paragraflarımı otomatik olarak kaldırır ve söz konusu resimleri yükler. Resmin eklenmesini, metnin değiştirilmemesini istiyorum. Bu neden oluyor? Bunun yerine ekranda bir öğeye görüntüyü ekleyebilirsiniz document.write kullanmanınSayfayı, resim yerine görüntülüyor yerine ekler

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

kaynak

2016-04-01 Russell Bloxwich

'.html()' nedir? – JanLeeYu

. Resmi burada tutmak için id="flipDisplay" paragraf etiketini kullanıyorum.

flipDisplay eski içeriğini silmek ve yeni sonucu eklemek için yeni bir showImage işlevini kullanarak bir img öğesi oluşturuyorum. sayfa yüklendikten sonra kullanıldığında, bu DOM temizlemek ve yazma tedarik edildi yalnızca ne ekleyecektir çünkü document.write kaçınarak am

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

. Etkileşimli sayfalar, yukarıdaki örnek gibi, sayfayı değiştirirken diğer yöntemleri kullanma eğilimindedir.

kaynak

2016-04-01 01:28:12 IrkenInvader

Aynı zamanda, DOM oluşturulduktan sonra, 'document.write' için bir çağrının DOM'ı sıfırlayacağını ve yalnızca bir 'img' etiketi ile bir belge oluşturacağını da belirtmeliyim. –

İyi bir nokta, farklı bir stratejiye geçişi açıklamalıydım. Bir düzenleme eklendi. – IrkenInvader

Sayfayı, resim yerine görüntülüyor yerine ekler

cevap

İlgili konular