0

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.

Lauren
  • 185
  • 1
  • 1
  • 19

1 Answers1

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

programatique
  • 850
  • 1
  • 7
  • 13
  • I switched to this and it seemed to work in the modern browsers: document.getElementById( 'zoom' ).onclick = function() { zoomImage(); return false; } – Lauren Aug 23 '10 at 22:27
  • why wouldn't my previous method with in-line javascript not have worked though? It works when the onclick attribute is in an image tag, which is inside of an anchor tag. – Lauren Aug 24 '10 at 14:09
  • i'm have to check but i think it could throw an error if you're "zoomImage()" function is defined after zoomImage() is referenced on the page. I mean "before" and "after" in terms of actual line numbers. – programatique Aug 26 '10 at 20:21