CODEWITHSUNDEEP
javascriptarraysfor-loopundefined
Coler234
Coler234

Reputation: 67

Javascript: undefined & for loop issue

I am having yet another issue with defining variables. It keeps saying that the variable is undefined. When printing it out it uses the array "rl" and targets the first string, then prints it. It does it repeatedly until it printed out the whole array one by one. When I change "rl[c]"(C is the current number in the array being printed out) to rl[1] or rl[2] it prints it out. When I print c it prints out the number of players... what? If you can help me that will be very appreciated. Javascript:

var al;
var rl;
var bd;
function gp(){
    players = document.getElementById("input").value;
    if(isNaN(players)){
        alert(players.toUpperCase() + "'s Players? Please Fix"); 
        return;
    }
    if(players === " "){
        alert("Please Define How Many People Are Playing!");
        return;
    }
    if(players === ""){
        alert("Please Define How Many People Are Playing!");
        return;
    }
    if(players < 4){
        alert("Sorry, You Need Atleast 4 Players To Play!");
        return;
    }
    SA(players)
}
function SA(players){
    var positions = ["Murderer", "Judge", "Innocent", "Innocent"]; //Pre-set positions
    if(players == 5){
        positions.push("Co-Judge");
    }else if(players == 6){
        positions.push("Innocent", "Co-Judge"); 
    }else if(players == 7){
        positions.push("Murderer-2!", "Innocent", "Co-Judge");
    }
    Randomize(players, positions)
}
function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}
function Randomize(players, positions){
    rl = shuffle(positions);
    al = positions.length;
    confirm("You Have: " + al + " Players, Correct?");
    return rl;
}
var counter;
var c;
function DJ(){
    var bd = 0;
    for(var c = 0; c < al + 1; c++){
        if(counter == 0){
            var tz = c.value;
            document.getElementById("DS").innerHTML=("You Are A: " + rl[tz]);
            document.getElementById("DJ").innerHTML=("Click To Clear!");
            counter = 1;


        }else{
            document.getElementById("DS").innerHTML=("Click 'Display Your Job!'");
            document.getElementById("DJ").innerHTML=("Display Your Job!");
            counter = 0;
        }
    }
}

HTML:

<html>
    <head>
        <link href="Styles.css" type="text/css" rel="stylesheet">
        <script src="Javascript.js" language="javascript" type="text/javascript"></script>
        <title>Miji</title>
    </head>
    <body>
        <h1 id="mt">~*~ Miji ~*~</h1>
        <div id="GetPlayers">
            <input maxlength="1" id="input"> <button id="gp" onclick="gp()">Start!</button>
            <br/>
            <br/>
            <button id="DJ" onclick="DJ();">Display Your Job!</button>
            <br/>
            <span id="DS">1) Input Amount Of Players. 2)Click 'Display Your Job!'</span>
        </div>
    </body>
</html>

Update: The tz = c.value was to test if c was being set to a string or something...

Upvotes: 0

Views: 157

Answers (1)

Tom
Tom

Reputation: 7740

The issue is that you're setting al to positions.length and then looping to al + 1. Remember, javascript arrays are 0 based.

Take for example an array of size 4, like:

var myArray = [1,2,3,4];

You are setting al = myArray.length, which is 4 and then looping to the first value less than 4 + 1, which is 4. However, an array with a length of 4 has a max index of 3, so when your loop gets to the last iteration and sets the innerHTML to myArray[4], the result is undefined.

Upvotes: 1

Related Questions