Unable to create an image using JavaScript

Question

I'm trying to create an image on the page using JavaScript, however even the alert('This function works!') does not work! I have no idea why it doesn't work, Help please!

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

language="javascript" - that attribute is deprecated. Just omit it! — ThiefMaster
– ThiefMaster, Commented Apr 27, 2014 at 13:49

Sirko · Accepted Answer · 2014-04-27 13:49:02Z

2

You never append the image to the DOM. Use appendChild() for that:

function loadImages(){ 

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

  document.body.appendChild( myImage );

}

createElement() actually will create a new element. You can use this as an alternative to your new Image() constructor. It, however, does not add the created element to the DOM. Hence it will remain invisible until you do add it to the DOM.

MDN on createElement()

answered Apr 27, 2014 at 13:49

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Epic · Accepted Answer · 2014-04-27 13:57:09Z

0

Don't put an image in the button element. Add CSS to it to apply the image as a background:

 <button style="background-image:url(path/to/image.png" id="btn" alt="button">

I've updated your javascript to attach a listener unobstrusively, ensured the element is appended to the body, and called alert properly:

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/

answered Apr 27, 2014 at 13:57

Mister Epic

16.8k13 gold badges88 silver badges157 bronze badges

Collectives™ on Stack Overflow

Unable to create an image using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related