变量定义问题Javascript

Question

I'm trying to randomize a string depending on how many players their are and assign each player their job/role. In the Chrome Console I am getting the error, "Uncaught ReferranceError: al is not defined." I dont get what the issue is, the variable is defined before using it(defined in first button, used in second). I have an alert in the document that proves the variable is defined, and when pressing the button it says in the parameters al. HTML:

    <input maxlength="1" id="input"> <button id="gp" onclick="gp()">Start!</button>
    <br/>
    <br/>
    <button id="DJ" onclick="DJ(al, rl);BlankDisplay(al, rl)">Display Your Job!</button>
    <br/>
    <span id="DS">1) Input Amount Of Players. 2)Click 'Display Your Job!'</span>

Javascript:

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){
    var rl = shuffle(positions);
    var al = positions.length;
    confirm("You Have: " + al + " Players, Correct?");
    alert(al + ". " + rl);
}
function DJ(al, rl){
    var counter = 0;
    var bd = 0;
    for(var c = 0; c < al + 1; c++){
        if(counter == 0){
            document.getElementById("DS").innerHTML(rl[c]);
            document.getElementById("BJ").innerHTML("Click To Clear!");
            bd = 1;
        }
    }
}
function BlankDisplay(al, rl){
    if(bd == 1){
        document.getElementById("Click The Button Above To See Your Job!");   
    }
}

Answer 1

You have two function, DJ and BlankDisplay (nevermind the use of caps) that both take arguments of al and rl, but second function doesn't make use of al, or rl. Then in this code: <button id="DJ" onclick="DJ(al, rl) you pass in the variables al and rl into the function call for DJ, but unless you've defined the var al and rl as properties on the window/global scope, then those are undefined.

I'm guessing you're confused about the distinction between a variable and and an argument. So I'd start there.

Answer 2

Remove the al & rl from your DJ parameters. They live in a global scope and should have access to al & rl WITHOUT the need of passing it via the DJ button's onclick .

• Update button DJ like so: <button id="DJ" onclick="DJ(); BlankDisplay();">Display Your Job!</button> .
• Add al and rl before everything in your JS like so: var al, rl; .
• Omit var in your Randomize. So this: var rl = shuffle(positions); var al = positions.length; var rl = shuffle(positions); var al = positions.length; should become this: rl = shuffle(positions); al = positions.length; rl = shuffle(positions); al = positions.length; .
• Change this line function DJ(al, rl){ to this function DJ(){ .
• Change this line function BlankDisplay(al, rl){ to this function BlankDisplay(){ .

This should do.