$Three3 Posted April 18, 2010 Share Posted April 18, 2010 Hi everyone, I am new to JavaScript (only a couple of days of reading a book) and I am stuck on this code snippet. I have looked at it over and over again but cannot seem to figure out why it is not working. I am sure it is something really simple that I have just looked over but I really just need a fresh pair of eyes to look at this. The code is supposed to update a placeholder image on a page without the page having to reload. But when I am clicking on the link of an image, it is taking me to the link where the image is located instead of replacing the placeholder image. Here is my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Image Gallery</title> <script type="text/javascript" src="scripts/showPic.js"></script> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a> </li> <li> <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a> </li> <li> <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a> </li> <li> <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a> </li> <li> <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a> </li> <li> <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a> </li> </ul> <br /> <img src="images/placeholder.jpg" title="Place Holder Image"> </body> </html> And here is the JavaScript function I am using to get this done: <script type="text/javascript"> function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); } </script> Any help is greatly appreciated and thanks in advance for the help. Quote Link to comment Share on other sites More sharing options...
TeddyKiller Posted April 18, 2010 Share Posted April 18, 2010 document.getElementById("placeholder"); There isn't a line at all in yoru code that has the id 'placeholder' I'm no expert, but this is obviously going to be a problem. Not too sure where the ID is going to go though. I'm assuming its related to a place holder. I think the id should be in this line <img src="images/placeholder.jpg" title="Place Holder Image"> so changing it to.. <img src="images/placeholder.jpg" title="Place Holder Image" id="placeholder"> Could be wrong.. Quote Link to comment Share on other sites More sharing options...
$Three3 Posted April 18, 2010 Author Share Posted April 18, 2010 document.getElementById("placeholder"); There isn't a line at all in yoru code that has the id 'placeholder' I'm no expert, but this is obviously going to be a problem. Not too sure where the ID is going to go though. I'm assuming its related to a place holder. I think the id should be in this line <img src="images/placeholder.jpg" title="Place Holder Image"> so changing it to.. <img src="images/placeholder.jpg" title="Place Holder Image" id="placeholder"> Could be wrong.. Hey thanks for the reply. I changed the line of code to add this: <img src="images/placeholder.jpg" title="Place Holder Image" id="placeholder"> But it still did not work for me. Any other ideas? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.