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](http://stackoverflow.com/questions/21477717/how-to-call-a-js-function-using-onclick-event) — Nick L., Aug 21 '14 at 13:07

score 4 · Answer 1 · answered Aug 21 '14 at 13:05

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.

Jonast92 · Answer 2 · 2014-08-21T14:07:49.007

1

Attaching it like this should do the job:

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

Demo

edited Aug 21 '14 at 14:07

answered Aug 21 '14 at 13:10

Jonast92

4,861
1
14
30

Is there a reason why I shouldn't use traditional event handling (the second line) in Firefox? – Felix Kling Aug 21 '14 at 13:34
@FelixKling Nope. Just me being hasty. Updated. – Jonast92 Aug 21 '14 at 14:08
Indeed, your syntax is short AND does the job perfectly. Thanks ! – iceman94 Aug 21 '14 at 15:30

score 1 · Accepted Answer · edited May 23 '17 at 11:57

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).

Javascript - Calling a function for an onClick event

3 Answers3