Заменяет страницу вместо изображения

Приведенный ниже код автоматически удаляет все мои заголовки и абзацы и просто загружает изображения, о которых идет речь. Я хочу, чтобы изображение было добавлено, а не заменяло текст. Почему это происходит?Заменяет страницу вместо изображения

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

Я избегаю document.write потому, что при использовании после загрузки страницы, он будет очистить DOM и вставить только то, что было поставлено на запись. При изменении страницы интерактивные страницы используют другие методы, например, пример выше.

источник

2016-04-01 01:28:12 IrkenInvader

Я думаю, что в ответе также следует упомянуть, что после создания DOM вызов 'document.write' сбросит DOM и создаст документ только с тегом' img'. –

Хорошо, я должен был объяснить переход к другой стратегии. Добавлено редактирование. – IrkenInvader

Заменяет страницу вместо изображения

ответ

Смежные вопросы