Question

I was trying to do this in an alert box only to find out that I can’t now. I cannot manage to get this to display at all. Instead of the variable I get [object HTMLImageElement]. I am missing something but what is it?

function joePic(){
    var joe_fat = new Image;
    joe_fat.src = "pic1.jpg";
    document.getElementById('photo').innerHTML = joe_fat;
}

<input type="button" value="Click here it find out" name="joePhoto" onclick="joePic()" 
height="150" width="150" />

Answer 1

Well, you’re trying to assign an Image as HTML, but it’s not HTML. It’s an Image.

You have two options:

1. Append joe_fat into the #photo element using the proper DOM function (which is appendChild) instead of pretending it’s a string of HTML:

   function joePic() {
       var joe_fat = new Image;
       joe_fat.src = "pic1.jpg";
   
       var photoElm = document.getElementById('photo');
       photoElm.innerHTML = '';        // clear target first
       photoElm.appendChild(joe_fat);  // now add image
   }
   

2. Get rid of the Image object and actually do present a string of HTML instead:

   function joePic() {
      document.getElementById('photo').innerHTML = '<img src="pic1.jpg" />";
   }