2016-03-15 2 views
-2

Где ошибка в коде?Javascript image in div error

<!DOCTYPE html> 
<html> 
<body> 
<div id="img"></div> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 
    var img = document.getElementById("img"); 
    var x = document.createElement("IMG"); 
    x.setAttribute("src", "img_pulpit.jpg"); 
    x.setAttribute("width", "304"); 
    x.setAttribute("width", "228"); 
    x.setAttribute("alt", "The Pulpit Rock"); 
    document.img.appendChild(x); 
} 
</script> 

</body> 
</html> 

Я беру идентификатор из DIV, но изображение не загружается на этот Div ..

Я не знаю, где ошибка.

заранее спасибо

+0

вы устанавливаете 'width' атрибут дважды. Также убедитесь, что файл 'img_pullit.jpg' находится в той же папке, что и ваш html-файл, и удалите часть' document.' при вызове функции 'appendChild'. –

+0

Вместо document.img.appendChild (x); используйте img.appendChild (x) – blessenm

+0

Откройте окно консоли в инструментах разработчика браузера, и вы четко увидите, где проблема. –

ответ

0

необходимо разместить свой тег script до html.
использование img.appendChild(x); вместо document.img.appendChild(x);

<script> 
 
    function myFunction() { 
 
     var img = document.getElementById("img"); 
 
     var x = document.createElement("IMG"); 
 
     x.setAttribute("src", "img_pulpit.jpg"); 
 
     x.setAttribute("width", "304"); 
 
     x.setAttribute("width", "228"); 
 
     x.setAttribute("alt", "The Pulpit Rock"); 
 
     img.appendChild(x); 
 
    } 
 

 
</script> 
 
<div id="img"></div> 
 
<button onclick="myFunction()">Try it</button>

0

Ошибка заключается здесь document.img.appendChild(x);

Изменить его img.appendChild(x);

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<div id="img"></div> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    var img = document.getElementById("img"); 
 
    var x = document.createElement("IMG"); 
 
    x.setAttribute("src", "img_pulpit.jpg"); 
 
    x.setAttribute("width", "304"); 
 
    x.setAttribute("height", "228"); //change width to height 
 
    x.setAttribute("alt", "The Pulpit Rock"); 
 
    img.appendChild(x); 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Кроме того, вы устанавливаете width атрибут дважды. Измените его на height