<a onclick="testFunction(); return false;">Click me</a>
<script type="text/script">
    (function (){
        var testFunction = function(){
            console.log('From test function');
        };
    })();   
</script>

In the above code, when I click on the hyperlink it is showing testFunction not defined.

How do I execute the testFunction without polluting the global name space?

<a onclick="testFunction(); return false;">Click me</a>
<script type="text/script">
    (function (){
        var testFunction = function(){
            console.log('From test function');
        };
    })();   
</script>

In the above code, when I click on the hyperlink it is showing testFunction not defined.

How do I execute the testFunction without polluting the global name space?

• javascript
• html

Share Follow asked Oct 29, 2015 at 20:03 javanoobjavanoob 6,4421818 gold badges7272 silver badges9292 bronze badges 2

• 4 Add the event in the IIFE using addEventListener. – Teemu Commented Oct 29, 2015 at 20:04
• If you insist on using an inline event handler like this then your function should live in a module, and the inline handler would refer to the function through its module. The answers below are a better choice, although you should wait until the DOM is loaded to attach the handler. – Dave Newton Commented Oct 29, 2015 at 20:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

This is why you don't use inline event handling. Define an event handler method inside your IIFE, otherwise the scope is not able to reach and testFunction is undefined.

<a id="clickMeInstead">Click me</a>
<script type="text/script">
    (function (){
        var testFunction = function(){
            console.log('From test function');
        };
        var link = document.getElementById("clickMeInstead");
        link.addEventListener("click", function() {
            //run code here
        });
    })();   
</script>

Use addEventListener instead of inline events

var link = document.getElementsByTagName("a")[0];
link.addEventListener("click", function() {
    console.log('From test function');
});

If you just want to prevent testFunction() to pollute the global namespace, you can do a variation of the revealing module design pattern to achieve this by doing the following:

    <a onclick="coverModule(); return false;">Click me</a>

<script>
        function coverModule() {
            return (function testFunction() {
                    alert('From test function');
            })();
        }
</script>

I'd remend this over using event handlers since DOM manipulation is an expensive operation. But please note that this also cannot be considered an optimal solution since inline JavaScript isn't nice. It's all about the trade-off you're willing to make.