Databases
StackOverflow2013
Postsdbo
POWhy does trying to replace an image source browse me to the image instead?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does trying to replace an image source browse me to the image instead?
    text
    copied!<p>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 overlooked, and I just need a fresh pair of eyes to look at this. </p> <p>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:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Image Gallery&lt;/title&gt; &lt;script type="text/javascript" src="scripts/showPic.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Snapshots&lt;/h1&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat"&gt;Cat&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="images/night.jpg" onclick="showPic(this); return false;" title="Night"&gt;Night&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke"&gt;Coke&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports"&gt;Sport&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's"&gt;MnM's&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid"&gt;Kid&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;br /&gt; &lt;img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And here is the JavaScript function I am using to get this done:</p> <pre><code>&lt;script type="text/javascript"&gt; function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); } &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload