Changing Scope from Global to Local Breaking Javascript Program

Question

Thanks to the help of you fine Overflowians, I fixed up my silly little RNG Addition game and got it working. Now, at one user's suggestion, I'm trying to change the scope of the addition game's code from global to local before I code up the next game; I want each game to be completely contained within its own scope, as I understand that learning to not thoughtlessly contaminate the global scope is a good idea. However, I'm a bit stuck on how to achieve that.

Here's the code for the currently functional addition game:

function beginAdditionChallenge() {
    var x = Math.ceil(Math.random()*100);
    alert(x);
    for (var i = 0; i < 3; i++) {
        var a = Number(prompt("Provide the first addend.", ""));
        var b = Number(prompt("Provide the second addend.", ""));
        if (a + b === x) {
            alert("Well done!");
            break;
        }
            else if (a + b !== x && i < 2) {
            alert("Please try again.");
        }
        else {
            alert("Derp.");
        }
    }
}

function initChallenge() {
    var button = document.getElementById("challengeButton");
    button.addEventListener("click", beginAdditionChallenge);
}

window.addEventListener("load", initChallenge);

And here's my attempt to wrap it, which only succeeds in breaking the game, such that the button doesn't even respond:

window.addEventListener("load", function() {
    function beginAdditionChallenge() {
        var x = Math.ceil(Math.random()*100);
        alert(x);
        for (var i = 0; i < 3; i++) {
            var a = Number(prompt("Provide the first addend.", ""));
            var b = Number(prompt("Provide the second addend.", ""));
            if (a + b === x) {
                alert("Well done!");
                break;
            }
                else if (a + b !== x && i < 2) {
                alert("Please try again.");
            }
                else {
                alert("Derp.");
            }
        }
    }

    function initChallenge() {
        var button = document.getElementById("challengeButton");
        button.addEventListener("click", beginAdditionChallenge);
    }

    window.addEventListener("load", initChallenge);
    });

Functional code is available on JSFiddle here.

you can use self invoking function for local context and it will not break your code too. — Akhlesh, Jun 15 '14 at 04:54
you just need to learn how to use fiddle...when to turn off `onLoad` settings — charlietfl, Jun 15 '14 at 04:54

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

Note that the onLoad option in JSFiddle does the same as your 2nd snippet. You'll want to choose one of the No wrap options when binding to 'load' yourself.

And, the issue stems from attempting to bind to 'load' within a 'load' handler:

window.addEventListener("load", function() {
    // ...

    window.addEventListener("load", initChallenge);
});

When the event is already firing and handling the outer binding, it's too late to add more handlers to it. They won't be cycled through and the event shouldn't occur again.

You'll either want to call initChallenge within the outer event binding:

window.addEventListener("load", function() {
    // ...

    initChallenge();
});

Or, you can use an IIFE with the inner binding:

(function () {
    // ...

    window.addEventListener("load", initChallenge);
})();

edited May 23 '17 at 12:05

Community

1
1

answered Jun 15 '14 at 04:58

Jonathan Lonowski

121,453
34
200
199

Of those two solutions, is there any particular reason to favor one over the other? – user242007 Jun 15 '14 at 04:59
@user242007 Not really. The outer binding will provide the same local scope to your code as the IIFE. It's just a matter of personal preference. – Jonathan Lonowski Jun 15 '14 at 05:06
Used the IIFE approach, it's running again. Thanks a lot! – user242007 Jun 15 '14 at 05:48

Changing Scope from Global to Local Breaking Javascript Program

1 Answers1