画像を追加するのではなく画像に置き換えます

以下のコードは、見出しと段落をすべて自動的に削除し、問題の画像だけを読み込みます。テキストを置き換えるのではなく、イメージを追加します。なぜこれが起こっているのですか？画像を追加するのではなく画像に置き換えます

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

出典

2016-04-01 Russell Bloxwich

'.html（）'について – JanLeeYu

document.writeを使用する代わりに、画像を画面上の要素に追加することができます。私は画像をここに保持するのにid="flipDisplay"段落タグを使用しています。

img要素を作成してから、新しいshowImage関数を使用して、flipDisplayの古い内容を消去し、新しい結果を追加します。

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

ページがロードされた後に使用する場合、それはDOMをクリアし、書き込みに供給されたものだけを挿入しますので、私はdocument.writeを避けています。対話型ページは、上記の例のように、ページを変更するときに他の方法を使用する傾向があります。

出典

2016-04-01 01:28:12 IrkenInvader

私は、DOMがビルドされた後、 'document.write'を呼び出すとDOMをリセットし、' img'タグだけのドキュメントを作成するという答えにも触れるべきだと思います。 –

良い点、私は別の戦略へのシフトを説明していたはずです。編集を追加しました。 – IrkenInvader

画像を追加するのではなく画像に置き換えます

答えて

関連する問題