Question

我尝试使用JavaScript在页面上创建图像，但即使是警报（＆＃39;此功能有效！＆＃39;）也不起作用！我不知道它为什么不起作用，请帮助！

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

Answer 1

您永远不会将图像附加到DOM。请使用appendChild()：

function loadImages(){ 

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

  document.body.appendChild( myImage );

}

createElement()实际上会创建一个新元素。您可以使用它作为new Image()构造函数的替代方法。但是，它不将创建的元素添加到DOM。因此，在将其添加到DOM之前，它将保持不可见。

MDN on createElement()

Answer 2

不要在按钮元素中放置图像。添加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/

无法使用JavaScript创建图像

2 个答案: