Using an event handler to invoke a function while preventing default behaviour
<p>I have been trying to create a dynamic JavaScript image gallery that can be navigated from one page, without the need for the user to navigate to another page.</p>

<pre><code>function showPic(whichPic) { 
    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 
}
</code></pre>

<p>I am trying to invoke the <code>showPic</code> function with the <code>onlick</code> event handler, while also preventing the default behavior of the  element that takes the user to the destination of the link. I thought that by adding a <code>return false</code> statement to to the JavaScript contained by the <code>onclick</code> event handler I could get this functionality. It seems not to be working and I cannot understand why.</p>

<p>Here is my HTML markup:</p>

<pre><code>&lt;h1&gt;Breaking Bad Characters&lt;/h1&gt;
&lt;ul&gt;
    &lt;li&gt;
        &lt;a href="images/tuco.jpg" onclick="showPic(this); return false;" title="Tuco"&gt;Tuco Salamanca&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="images/walt.jpg" onclick="showPic(this); return false;" title="Walt"&gt;Walter White&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="images/gus.jpg" onclick="showPic(this); return false;" title="Gustavo"&gt;Gustavo Fring&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="images/saul.jpg" onclick="showPic(this); return false;" title="Saul"&gt;Saul Goodman&lt;/a&gt;
    &lt;/li&gt;
    &lt;img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /&gt;
&lt;/ul&gt;
</code></pre>

<p>I can also provide a link to the work:</p>

<p><a href="http://the-session.co.uk/JSgallery/" rel="nofollow">http://the-session.co.uk/JSgallery/</a></p>
