Reasons Why JavaScript onClick Does Not Work in Firefox

Reasons Why JavaScript onClick Does Not Work in Firefox
Page content

onClick Event Handler

JavaScript event handlers are pieces of code that are set into execution when a user performs a particular action on the webpage. These pieces of code are completely integrated with HTML tags, and not placed in between <script></script> blocks like other JavaScript functions. One of the more commonly used event handlers is onClick.

As the name suggests, onClick is set into motion when a user clicks on something in particular on the webpage. For example, if there was a link on a website splash page and it contained a link to enter the site:

<a href = “firstpage.html” onClick="alert(‘Welcome!’);">Enter Site.</a>

The onClick event handler would display a message box, with the message ‘Welcome!’ and move to the HTML page ‘firstpage.html’.

Although onClick is often used with text links, it is not restricted to them at all. It can be embedded in input objects, like buttons, or with form elements. Additionally, onClick can be used to call functions that are embedded in script blocks, thereby eliminating the need to create an entire block in the middle of an HTML tag.

Why onClick doesn’t work in Firefox

There are a number of reasons why event handlers respond in a certain way in Internet Explorer, but do not work with Firefox at all. It has a great deal to do with how each browser interprets the HTML code and, by extension, the JavaScript code.

Firefox also has trouble with the onClick event handler for various reasons, and each time the solution is entirely different. The interpretation is not always predictable, so the following is a list of common potential problems that may be causing the onClick handler to fail in Firefox:

  1. A commonly overlooked mistake when using JavaScript in a browser, regardless of whether it is Firefox or Internet Explorer, is that scripting must be enabled in the browser. This may seem like an obvious solution, however in cases where the scripting is minimal and restricted to a few event handlers in the code, it could be forgotten about altogether.
  2. When using the onClick event handler, it is always better to include a return statement. Sometimes, if the values of a function call are not what were expected, the onClick function will appear to fail if it does nothing. Therefore adding a return statement will act as an exception handler, in case of unexpected results.
  3. In some cases, the problem may not be with the onClick event handler at all. If the href attribute is not defined correctly, all the actions of that anchor tag will potentially fail, including onClick. For instance, although the href attribute is a mandatory part of the anchor tag, developers may not want to use its functionality always. Therefore sometimes a null value is used. However, how the null value is specified is vital, as empty quotes are not accepted by Firefox. It would be best in these cases to use the hash symbol ‘#’.

Using Firebug to debug JavaScript Code

Firebug is a Firefox extension, especially designed to aid developers in analysing their dynamic code for bugs. More importantly, for the context of this article, it has a JavaScript console to examine the execution of code. This is a handy tool to track the values that are generated in the code, and watch the progression for debugging purposes.