javascript return false not working in image gallery as expected
<p>I'm very new to javascript and have a problem with the following code that is actually part of an exercise in the <em>dom scripting - webdesign with javascript</em> book.
I have an image gallery and when the link is clicked the picture should be displayed in a gif named placeholder, however the return false command is not executed and the browser goes about the normal behavior. It works fine with inline, but it doesn't when the inline code is taken out.</p>

<p>Here's a link to the script: <a href="http://jsfiddle.net/olupo/4HLzu/" rel="nofollow">http://jsfiddle.net/olupo/4HLzu/</a></p>

<p>HTML:</p>

<pre><code>&lt;h1&gt;cute cats&lt;/h1&gt;
&lt;ul id="imagegallery"&gt;
    &lt;li&gt;&lt;a href="http://www.petscareblog.com/wp-content/uploads/2011/03/kucing.jpg" title="cat 1"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.helpinghomelesscats.com/images/cat1.jpg" title="cat2"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://3.bp.blogspot.com/_gTJMEP-c2fo/Sa1_fohZBZI/AAAAAAAAKq8/nmid3IFuh3Q/s400/cute-cats-16.jpg" title="cat3"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://i1.kym-cdn.com/entries/icons/original/000/007/263/photo_cat2.jpg" title="cat4"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;img id="placeholder" src="placeholder.gif"&gt;
&lt;p id="description"&gt;choose an image&lt;/p&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>function preparegallery {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById('imagegallery')) return false;
    var gallery = document.getElementById('imagegallery');
    var links = gallery.getElementsByTagName('a');
    for (var i = 0; i &lt; links.length; i++) {
        links[i].onclick = function() {
            return showpic(this) ? false : true;
        }
    }
}

function showpic(pic) {
    if (!document.getElementById('placeholder')) return false;
    var source = pic.getAttribute('href');
    var placeholder = document.getElementById('placeholder');
    if (placeholder.nodeName != "IMG") return false;
    placeholder.setAttribute('src', source);
    if (document.getElementById('description')) {
        var text = pic.getAttribute('title') ? pic.getAttribute('title') : "";
        var description = document.getElementbyId('description');
        if (description.firstChild.nodeType == 3) {
            description.firstChild.nodeValue = text;
        }
    }
    return true;
}
</code></pre>

<p>CSS:</p>

<pre><code>#placeholder{
    height:500px;
    width:500px;
    border:2px solid #87cefa;
}
ul li{
    display:inline;
    list-style:none;
}
li a{

    text-decoration:none;
    font-size:2em;
    color:#999;
}
</code></pre>
