Я пытаюсь создать изображение на странице с помощью JavaScript, однако даже предупреждение ("Эта функция работает!") Не работает! Я понятия не имею, почему это не работает, Помогите пожалуйста!
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function loadImages() {
myImage = new Image();
myImage.src = "./images/A_01.png";
document.createElement(myImage);
document.alert('This function works!');
}
</script>
</head>
<body>
<p style="text-align: center">
<button>
<img src="images/K_01.png" onclick="loadImages()" alt="button" style="vertical-align: bottom">
onvert
</button>
</p>
</body>
</html>
Вы никогда не добавляете изображение в DOM. Используйте appendChild()
для этого:
function loadImages(){
myImage = new Image();
myImage.src = "./images/A_01.png";
document.body.appendChild( myImage );
}
createElement()
фактически создаст новый элемент. Вы можете использовать это как альтернативу вашему new Image()
. Однако он не добавляет созданный элемент в DOM. Следовательно, он останется невидимым, пока вы не добавите его в DOM.
Не помещайте изображение в элемент кнопки. Добавьте CSS к нему, чтобы применить изображение в качестве фона:
<button style="background-image:url(path/to/image.png" id="btn" alt="button">
Я обновил ваш javascript, чтобы ненавязчиво прикрепить слушателя, обеспечил добавление элемента в тело и вызвал alert
правильно:
var btn = document.getElementById('btn');
btn.addEventListener('click', loadImages);
function loadImages(){
myImage = new Image();
myImage.src = "./images/A_01.png";
document.body.appendChild(myImage);
alert('This function works!');
}
language="javascript"
- этот атрибут устарел. Просто опустите это!