Javascript error when I switch to gracefully degrading Javascript: zoomImage() not found

Question

When I switch this:

<div class="zoom">
<a href="javascript:zoomImage();" class="btn-zoom">view larger image</a>
</div>

to this:

<div class="zoom">
<a href="/zoomimg.jpg" onclick="zoomImage()" class="btn-zoom">view larger image</a>
</div>

I get an error that the zoomImage() function couldn't be found.

Here's an example page: http://www.avaline.com/102

The function is defined near the end of the page, but I didn't click on the link until after the page loaded.

Answer 1

You should be attaching event handlers to events in code. Using in-line javascript (javascript within HTML tags) is generally not recommended.

Take a look at this article, particularly "The Really Unobtrusive Way":

http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html