CODEWITHSUNDEEP
javascriptjqueryjsfiddle
cssyphus
cssyphus

Reputation: 40038

Is javascript namespace polluted?

I do not have a good grasp of the js namespace and am WAGing* re the title, but that's one of my guesses about what's happening.

My app is crashing (dramatically); trying to figure out why. In fact, after 3 Q/A pairs, it blows up the entire Chrome tab..! I'm beginning to suspect I've done something wrong in my code...

Warning: Save your browsing session before running these jsFiddles. (In Chrome, the jsFiddle only blows up its own tab but I can't comment on other browsers)

jsFiddle One
jsFiddle Two - dupe in case jsFiddle One blown away

Please help me to understand exactly which spectacular moronism I've committed today.

HTML:

<div id="result">
    <div class="truth tr0"><h2>---</h2></div>
    <div class="truth tr1"><h2>answer to one</h2></div>
    <div class="truth tr2"><h2>answer to two</h2></div>
    <div class="truth tr3"><h2>answer to three</h2></div>
    <div class="truth tr4"><h2>answer to four</h2></div>
 </div>   
<div id="replaceLink">
    <div class="youcould yc1">
        <a href="#2"><h2>QUESTION ONE</h2></a>
    </div>
    <div class="youcould yc2">
        <a href="#3"><h2>QUESTION TWO</h2></a>
    </div>
    <div class="youcould yc3">
        <a href="#4"><h2>QUESTION THREE</h2></a>
    </div>
    <div class="youcould yc4">
        <a href="#5"><h2>QUESTION FOUR</h2></a>
    </div>
    <div class="youcould yc5">
        <a href="#6"><h2>THANK YOU</h2></a>
    </div>
</div>

<div id="response"></div>
<input type="button" id="mybutt" value="Start Test" />

Javascript/jQuery:

var cnt = 0;
var window = {};
window.arrDone = [];

function nextQues() {
    if (window.arrDone.length == 4) return 5;

    success = 0;
    while (success == 0) {
        nn = Math.floor(Math.random() * 3) + 1;
        if (window.arrDone.indexOf(nn) == -1 && nn != 5) {
            success++;
            window.arrDone.push(nn);
        }
    }
    return nn;
}

$('.youcould, .truth').hide();
$('.tr0').show();

$('.youcould').click(function() {
    $(this).hide();
    thisA = window.arrDone[window.arrDone.length -1];
    $('.tr'+thisA).show();
});

$('.truth').click(function() {
    $(this).hide();
    nextQ = nextQues();
    $('.yc'+nextQ).show();
});

$('#mybutt').click(function () {
    $(this).hide();
    $('.tr0').hide();
    nextQ = nextQues();
    $('.yc'+nextQ).show();
});

Upvotes: 3

Views: 224

Answers (3)

Andy
Andy

Reputation: 63524

Your while loop runs infinitely on the third pass because it doesn't meet the condition.

Upvotes: 2

Bergi
Bergi

Reputation: 664513

At some point, arrDone will contain the numbers 1, 2, and 3, as produced by your random generator (which will never produce 5, btw). In that case, nextQues() does not abort and return five (as arrDone.lenght == 3), and will enter the loop. Your random generator produces nothing but the numbers 1, 2, and 3, which always are already in the array, so the if-condition (that would end the loop) is never fulfilled. You have an infinite loop generating random numbers.

I guess you want

function nextQues() {
    var l = 4;
    if (window.arrDone.length >= l)
        return l+1;

    while (true) {
        var nn = Math.floor(Math.random() * l) + 1; // generate 1, 2, 3 or 4
        if (window.arrDone.indexOf(nn) == -1) {
            window.arrDone.push(nn);
            return nn;
        }
    }
}

Upvotes: 2

Joe Enos
Joe Enos

Reputation: 40393

My guess would be

var window = {};

window is special, so creating a global variable named window is begging for trouble.

Upvotes: 5

Related Questions