admin管理员组

文章数量:1244219

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

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

  • javascript
  • image
  • innerhtml
Share Improve this question edited Mar 1, 2012 at 21:36 Adam Rackis 83.4k57 gold badges278 silver badges400 bronze badges asked Mar 1, 2012 at 21:33 user1243747user1243747 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. – user17753 Commented Mar 1, 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. – user17753 Commented Mar 1, 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. – user1243747 Commented Mar 1, 2012 at 22:40
Add a ment  | 

4 Answers 4

Reset to default 4

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)

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/uXpeK/

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

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

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

本文标签： Why does my image not show up when I use Javascript innerHTML to call itStack Overflow

版权声明：本文标题：Why does my image not show up when I use Javascript innerHTML to call it? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740215077a2242707.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。