$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. Link to comment https://forums.phpfreaks.com/topic/198887-need-help-with-this-simple-script-noob-question/ 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.. Link to comment https://forums.phpfreaks.com/topic/198887-need-help-with-this-simple-script-noob-question/#findComment-1043988 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? Link to comment https://forums.phpfreaks.com/topic/198887-need-help-with-this-simple-script-noob-question/#findComment-1043992 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.