CODEWITHSUNDEEP
javascriptimageinnerhtml
user1243747
user1243747

Reputation:

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

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!

Upvotes: 6

Views: 18001

Answers (4)

St.Woland
St.Woland

Reputation: 5417

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)

Upvotes: 4

mindandmedia
mindandmedia

Reputation: 6825

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/

Upvotes: 2

Jack
Jack

Reputation: 760

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

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

Upvotes: 1

clem
clem

Reputation: 3366

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>";
}

Upvotes: 1

Related Questions