Javascript: 未定义 & for 循环问题

Question

我在定义变量时遇到了另一个问题。它一直说变量未定义。打印出来时，它使用数组 "rl" 并以第一个字符串为目标，然后打印它。它重复执行直到它一个一个地打印出整个数组。当我将 "rl[c]"（C 是正在打印的数组中的当前数字）更改为 rl[1] 或 rl[2] 时，它会打印出来。当我打印 c 时，它会打印出玩家数量……什么？如果你能帮助我，我将不胜感激。 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>

更新：tz = c.value 是为了测试 c 是否被设置为字符串或其他东西...

Answer 1

问题是您将 al 设置为 positions.length，然后循环到 al + 1。请记住，javascript 数组基于 0。

以大小为 4 的数组为例，例如：

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

你正在设置 al = myArray.length，它是 4，然后循环到第一个小于 4 + 1 的值，即 4。但是，长度为 4 的数组的最大索引为 3，因此，当您的循环到达最后一次迭代并将 innerHTML 设置为 myArray[4] 时，结果未定义。

Javascript: 未定义 & for 循环问题

Javascript: undefined & for loop issue

javascript

arrays

for-loop

undefined