Невозможно создать изображение с помощью JavaScript

0

Я пытаюсь создать изображение на странице с помощью 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>
  • 2
    language="javascript" - этот атрибут устарел. Просто опустите это!
  • 0
    @ThiefMaster это наименьшая из его проблем.
Теги:

2 ответа

3
Лучший ответ

Вы никогда не добавляете изображение в DOM. Используйте appendChild() для этого:

function loadImages(){ 

  myImage = new Image();
  myImage.src = "./images/A_01.png";

  document.body.appendChild( myImage );

}

createElement() фактически создаст новый элемент. Вы можете использовать это как альтернативу вашему new Image(). Однако он не добавляет созданный элемент в DOM. Следовательно, он останется невидимым, пока вы не добавите его в DOM.

0

Не помещайте изображение в элемент кнопки. Добавьте 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!');
}

http://jsfiddle.net/8Q5UA/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню