Why does my image not show up when I use Javascript innerHTML to call it?

Asked 1/3, 2012 at 21:33 Answered 1/3, 2012 at 21:41

I am pretty new to Javascript, and I was trying somethings out. I am using a function to load an image inside a table using innerHTML. But the image does not show up, unless I call alert("whatever") at the bottom of the function, then it shows up while the alert is visible. The code I am using is something like (the function is called from an external js file)

<script>
   function show(){
        document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";
    }
</script>

<body> <input name="b1" type="button" value="pics" onclick="show()"/>
<table><td id='imageHolder1'>picture</td></table>
</body> ``

I don't understand why it doesn't work, all the examples i have looked at are similar, I see no big differences.Even if I try with out the tag it doesn't work. Well any help welcome! Thanks in advance, and if you have any suggestions on how to do this (no jquery since I am still learning javascript) I would also appreciate it. Thanks again!

Omnirange answered 1/3, 2012 at 21:33 Comment(3)

Check the #, you need to escape the " in your innerHTML string. innerHTML is a beast to work with, because you have to make sure everything you are inserting is true and good HTML. Might want to look into the more verbose, but more trust worthy DOM manipulating javascript such as appendChild etc. – Microsurgery 1/3, 2012 at 21:38

Also, I suggest you work with something like firebug for FF or some other JavaScript debugger, as these mistakes are easier to spot. – Microsurgery 1/3, 2012 at 21:41

thanks, I will try appendChild, and definitively look at the Javascript debuggers, as nothing seems to work with this example as it is. – Omnirange 1/3, 2012 at 22:40

You have an error in your string:

document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";

Should read

document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border=0/></a>";

(notice " to ' replacement)

Donatist answered 1/3, 2012 at 21:35 Comment(2)

This has got to be a bad cut-n-paste, otherwise it would produce a SyntaxError – Rolandrolanda 1/3, 2012 at 21:40

true, I erased the src when pasting – Omnirange 1/3, 2012 at 22:49

there are LOTS of errors and lazy shortcuts in your code. i made a fiddle and had to correct quite a few places that looks like very hasty work... here is your fiddle, but play it with some devotion: http://jsfiddle.net/uXpeK/

Kirov answered 1/3, 2012 at 21:41 Comment(1)

Thanks a lot for taking your time to do this! I guess it has something to do with putting in the important attributes. – Omnirange 1/3, 2012 at 22:46

you aren't adding the image src. and it should be href='#'it should be like this

function show(){
     document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border='0'/></a>";
}

Arrow answered 1/3, 2012 at 21:36 Comment(0)

Try giving the image an id of 'image' then using the following:

function show(){
    document.getElementById('image').src = 'photos/picture.jpg'
}

Aristate answered 1/3, 2012 at 21:38 Comment(0)

Recommended topics

Hot tags