Home/ Questions/Q 9105737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T02:10:28+00:00

I seem to be having scope issues with using addEventListener inside of an immediate

  • 0

I seem to be having scope issues with using addEventListener inside of an immediate anonymous function.

Inside of the event listener, I am creating an instance of a Javascript “class” that is constructed outside of the immediate function (using a constructor and prototype).

In trying to keep with good practices, I wanted to use the immediate function to avoid global variables, and addEventListener to avoid using inline Javascript (thus separating it from html).

So how can I correctly do this without having scope issues, and what are good practices for doing so?

Here is my html:

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <input type = "text" id = "userInput" />
        <input type = "button" id = "submitButton" value = "submit" />

            <script type = "text/javascript" src = "asdf.js" />
    </body>
</html>

…and here is my Javascript asdf.js (which is not working):

// constructor for object-oriented processing of the user input
function Statement(expression)
{
    this.expression = expression;
}
    // instance method
    Statement.prototype.checkSyntax = function()
    {
        var newExp = this.expression;

        return newExp;
    };

// immediate anonymous function
(function()
{   
    var submitButton = document.getElementById("submitButton");

    // event listener for the submit button
    submitButton.addEventListener("onclick", function(event)
    {
        var userInput = document.getElementById("userInput");

        // creating a new object with constructor above
        var expr = new Statement(userInput);

        // calling instance method of the "class" Statement
        alert(expr.checkSyntax() );

        // disable the button after first use
        event.stopImmediatePropagation();
    }, false);

})(); // end of immediate anonymous function
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    addEventListener takes an argument like click, not onclick. However, older IE’s attachEvent requires onclick. Everything else seems fine.

    • 0