Question

I’m working on a easter egg, where you have to activate some links in the correct order, before the secret is revealed.

I can’t get this script to work. I guess I’ve wrote something wrong, but can’t see what it is…

<script>
    $(document).ready(function() {
        $('#show').hide();
        var StepOfThree = 0;
        alert(StepOfThree);

        $('#linkone').mouseover(function() {
            StepOfThree = 1;
            alert(StepOfThree);
        });

        $('#linktwo').mouseover(function() {
            if (StepOfThree1 === 1) {
                StepOfThree = 2;
                alert(StepOfThree);
            } else {
                StepOfThree = 0;
                alert(StepOfThree);
            }
        });

        $('#linkthree').mouseover(function() {
            if (StepOfThree1 === 2) {
                $('#show').show();
                alert(StepOfThree);

            } else {
                StepOfThree = 0;
                alert(StepOfThree);
            }
        });
    });
</script>

    <a href="#" id="linkone">Link #1</a>
    <a href="#" id="linktwo">Link #2</a>
    <a href="#" id="linkthree">Link #3</a>

    <div id="show">This is hidden content</div>

The mouseOver on the #linkTwo and #linkThree doesn’t even give me an Alert.. What have I done wrong?

Answer 1

Why are you using jQuery for Javascript primitives? This is horribly wrong! This seems like a case of jQuery-itis (sorry for the Google cache link) – use the Javascript equality operator, and don’t wrap your StepOfThree for a simple numeric comparison:

if (StepOfThree === 1)
{
    // do stuff
}

My guess is you’re learning Javascript at the same time as jQuery, right?

---

Update:

Okay, here’s why your second and third handlers don’t work as you expect: when you create a callback like the way you are, you’re creating a closure. In effect, this “seals” the value of StepOfThree into the mouseover handlers so they never see the updated value.

Try doing it like this instead:

http://jsbin.com/ovocu/6

This way, you’re closing on an object (a “reference” or “pointer” if you’re familiar with C/C++/Java) rather than the primitive value of the number itself.

Some good reading on Javascript closures.

---

Update 2: for the simplest working example, here’s what Daniel had to offer (from the comments below): http://jsbin.com/iluse3

No need to pass around an object. Sorry for any confusion this caused!