Javascript - Calling a function for an onClick event

Question

Consider the following code :

<html> <head> </head> <body> <script> function showAlert (text) { alert(text); } x = document.getElementById('aTag'); x.setAttribute('onclick', "alert('Hello World')"); //WORKS x.setAttribute('onclick', "showAlert('Hello World')"); //DNW (showAlert is not defined) </script> <table> <tr> <td><a href="javascript:void(0)" id="aTag">TEST</a></td> </tr> </table> </body> </html>

The first onclick assignment works and produces a hyperlink on which, when you click on it, opens a dialog box with the Hello World message. Probably because the window.alert method is global (I don't know if it is the right word).

But the second assignment only returns the following error when clicked on :

showAlert is not defined

Being a beginner at JS, I think the issue might be about the showAlert function scope or maybe the elementNode.setAttribute method context in which the showAlert function doesn't exist.

I thank you all in advance for your time.

Regards.

possible duplicate of How to Call a JS function using OnClick event — Nick Louloudakis
– Nick Louloudakis, Commented Aug 21, 2014 at 13:07

adeneo · Accepted Answer · 2014-08-21 13:05:56Z

At the time you're trying to get the element, it doesn't exist yet.
Move the script tag to the bottom, right before the closing body tag.

<table> <tr> <td><a href="javascript:void(0)" id="aTag">TEST</a></td> </tr> </table> <script> function showAlert (text) { alert(text); } x = document.getElementById('aTag'); x.setAttribute('onclick', "alert('Hello World')"); //WORKS x.setAttribute('onclick', "showAlert('Hello World')"); //DNW (showAlert is not defined) </script>

FIDDLE

You can not get an element with javascript that is not yet outputted to the DOM, so whenever you try to get an element, make sure it's available.

Community · Accepted Answer · 2017-05-23 11:57:42Z

First of all, thanks for taking the time to reply.

In the end, I took a look at the following answer : https://stackoverflow.com/a/21477793/3186538 and I ended up with this code :

<html> <head> </head> <body> <script> // Display text function function showAlert(text) { alert("Called in showAlert: " + text); } // But for the previous function to work, we must make sure that it is loaded after the rest of the DOM window.onload = function() { document.getElementById("aTag").onclick = function fun() { showAlert("Hello World"); } } </script> <table> <tr> <td><a href="javascript:void(0)" id="aTag">TEST</a></td> </tr> </table> </body> </html>

Now, when I click on the hyperlink, I do get a dialog box showing the Hello World message.

Thanks again to everyone (and, of course, SO).

Jonast92 · Accepted Answer · 2014-08-21 14:07:49Z

1

Attaching it like this should do the job:

x.onclick = function() {showAlert("foo");};

Demo

edited Aug 21, 2014 at 14:07

answered Aug 21, 2014 at 13:10

Jonast92

4,9671 gold badge20 silver badges33 bronze badges

3 Comments

Felix Kling Over a year ago

Is there a reason why I shouldn't use traditional event handling (the second line) in Firefox?

Jonast92 Over a year ago

@FelixKling Nope. Just me being hasty. Updated.

iceman94 Over a year ago

Indeed, your syntax is short AND does the job perfectly. Thanks !

Collectives™ on Stack Overflow

Javascript - Calling a function for an onClick event

3 Answers 3

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Linked

Related