为什么不.click（）为我的变量赋值？

Question

我非常新编码。在Codeacademy工作了一个半星期之后，我正在努力创造一些东西来拼凑我一起学到的东西。这是我的代码：

$(document).ready(function(){


//What img does when mouse hovers on it
    $("img").mouseenter(function(){
        $(this).css("height", "10em");
        $(this).css("width", "10em");
        $("selector").css("cursor", "pointer");
    });
    $("img").mouseleave(function(){
        $(this).css("height", "8em");
        $(this).css("width", "8em");
    });
    
    
    
//Assigning values to userChoice (click on an img!)
    $('.rock').click(function() {
        var userChoice = "rock";
        var compChoice = Math.random();
    });
    
    $('.paper').click(function() {
        var userChoice = "paper";
        var compChoice = Math.random();
    });  
    
    $('.scissors').click(function() {
        var userChoice = "scissors";
        var compChoice = Math.random();
    });    
    
    $('.lizard').click(function() {
        var userChoice = "lizard";
        var compChoice = Math.random();
    });    
    
    $('.spock').click(function() {
        var userChoice = "rock";
        var compChoice = Math.random();
    });
    
        
//Assign compChoice
    if (compChoice <= 0.20) {
	    compChoice = "rock";
    } else if(compChoice <= 0.40) {
	    compChoice = "paper";
    } else if(compChoice <= 0.60) {
	    compChoice = "scissors";
    } else if(compChoice <= 0.80) {
        compChoice = "lizard";
    } else {
        compChoice = "spock";
    }

    
 
    if (userChoice === compChoice) {
        $("#end").css("display", "inline");
        $("#outcome").text(userChoice + " against " + compChoice + " ?");
        $("#winner").text("It's a tie!");
    }
    else if (userChoice === "rock") {
        if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER covers ROCK!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes SCISSORS!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "lizard") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes LIZARD!");
            $("#winner").text("You WIN!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK vaporizes ROCK!");
            $("#winner").text("You LOSE!");
        }
    }
    else if (userChoice === "paper") {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER covers ROCK!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS cuts PAPER!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "lizard") {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD eats PAPER!");
            $("#winner").text("You LOSE!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER disproves SPOCK!");
            $("#winner").text("You WIN!");
        }
    }
    else if (userChoice === "scissors") {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes SCISSORS!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS cuts PAPER!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "lizard") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS decapitate LIZARD!");
            $("#winner").text("You WIN!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK smashes SCISSORS!");
            $("#winner").text("You LOSE!");
        }
    }
    else if (userChoice === "lizard") {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes LIZARD!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD eats PAPER!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS decapitate LIZARD!");
            $("#winner").text("You LOSE!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD poisons SPOCK!");
            $("#winner").text("You WIN!");
        }
    }
    else {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK vaporizes ROCK!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER disproves SPOCK!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK smashes SCISSORS!");
            $("#winner").text("You WIN!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD poisons SPOCK!");
            $("#winner").text("You LOSE!");
        }    
    };
});

img {
    display: block;
	height: 8em;
	width: 8em;
	border-radius: 100%;
	border: 0.2em solid #001F5C;
	margin: 0;
    cursor: pointer;
}

body {
    margin: 0;
}

.title {
    position: relative;
    background-color: #001F5C;
    height: 4em;
    margin-top: 0;
    padding: 0.5em;
    border: 0;
    font-family: "Arial";
    text-align: center;
    font-size: 1.5em;
    color: #CCD2DE;
}

.main {
    position: relative;
    background-color: #8099CC;
    height: 40em;
    margin-top: -2em;
    padding: 0;
    border: 0;
}

.options {
    position: relative;
    width: 20em;
    height: 20em;
    padding: 4em;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.options div {
    display: block;
    position: absolute;
    top: 50%; left: 40%;
    margin: -2em;
    z-index: 1;
}


#end {
    display: none;
    position: fixed;
    background-color: #CCD2DE;
    border: 0.2em solid #A3A8B2;
    padding: 0;
    border-radius: 5%;
    height: 7em;
    width: 8em;
    top: 35%;
    left: 50%;
    margin-left: -4em;
    margin-top: -1em;
    z-index: 1000;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    color: #001F5C;
    font-size: 3em;
}

#last {
    font-family: Arial;
    color: #001F5C;
    font-size: 1em;
}

.rock { transform: rotate(216deg) translate(10em); rotate(-216deg);}
.paper { transform: rotate(288deg) translate(10em) rotate(-288deg); }
.scissors { transform: rotate(360deg) translate(10em) rotate(-360deg); }
.lizard { transform: rotate(72deg) translate(10em) rotate(-72deg); }
.spock { transform: rotate(144deg) translate(10em) rotate(-144deg); }

**JavaScript**

**HTML**

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<title>Rock Paper Scissors Lizard Spock</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="script.js"></script>
</head>
<body>
    <div class="title">
        <h2>ROCK  |  PAPER  |  SCISSORS  |  LIZARD  | SPOCK</h2>
    </div>
    
    <div class="main">
        <div id="end">
            <p id="outcome">SPOCK smashes SCISSORS!</p>
            <p id="winner">You win !</p>
            <p><span style="font-size:20px">Click here to play again!</span></p>
        </div>
    <div class="options">
        <div class="rock">
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/The_Childrens_Museum_of_Indianapolis_-_Petoskey_stone.jpg"/>
        </div>
        <div class="paper">
            <img src="https://pixabay.com/static/uploads/photo/2013/07/18/10/57/note-paper-163603_640.jpg"/>
        </div>
        <div class="scissors">
            <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Small_pair_of_blue_scissors.jpg"/>
        </div>
        <div class="lizard">
            <img src="http://www.torange.us/photo/10/16/Water-lizard-agama-1326212612_65.jpg"/>
        </div>
        <div class="spock">
            <img src="https://c1.staticflickr.com/9/8566/16477696740_cfb9ccddbc.jpg"/>
        </div>
    </div>
    </div>

</body>
</html>

**CSS**

我已经测试并重新测试了，我认为问题是.click（）函数没有为“userChoice”变量赋值。但我不知道我的代码有什么问题。

如果你知道什么是错的，我会非常感谢你在正确的方向或某种线索上轻推！我真的很想学习。

Answer 1

您有范围问题，将变量声明移到点击处理程序之外，只需在处理程序中设置值：

var userChoice = "", compChoice = 0;
$('.rock').click(function() {
    userChoice = "rock";
    compChoice = Math.random();
});

$('.paper').click(function() {
    userChoice = "paper";
    compChoice = Math.random();
});  

$('.scissors').click(function() {
    userChoice = "scissors";
    compChoice = Math.random();
});    

$('.lizard').click(function() {
    userChoice = "lizard";
    compChoice = Math.random();
});    

$('.spock').click(function() {
    userChoice = "rock";
    compChoice = Math.random();
});

Answer 2

您在每次点击时重新定义var userChoice和compChoice，这些变量仅在每个函数的范围内有效。

您应该将其定义为全局变量。

Answer 3

这是一个范围问题...你已经在每次点击绑定中在本地声明了userChoice和compChoice ....试试这个

编辑：甚至更好，给他们一个ID，然后将其全部包装在一个绑定中： - ）

var userChoice = "", compChoice = 0;

//Assigning values to userChoice (click on an img!)
$('#rock, #paper, #scissors, #lizard, #spock').on('click', function() {
    userChoice = $(this).id;
    compChoice = Math.random();
});

因为我很无聊，我喜欢整洁的代码......我已经重构了它： - ）

$(document).ready(function(){

    //What img does when mouse hovers on it
    $("img").mouseenter(function(){
        $(this).css("height", "10em")
        $(this).css("width", "10em")
        $("selector").css("cursor", "pointer")
    })

    $("img").mouseleave(function(){
        $(this).css("height", "8em")
        $(this).css("width", "8em")
    })

    var userChoice = "", compChoice = 0

    // Assigning values to userChoice (click on an img!)
    $('#rock, #paper, #scissors, #lizard, #spock').on('click', function() {
        userChoice = $(this).id
        compChoice = Math.random()
    })

    // Assign compChoice
    if (compChoice <= 0.20) 
        compChoice = "rock"

    else if(compChoice <= 0.40)
        compChoice = "paper"

    else if(compChoice <= 0.60)
        compChoice = "scissors"

    else if(compChoice <= 0.80) 
        compChoice = "lizard"
    else 
        compChoice = "spock"


    if (userChoice === compChoice) 
    {
        $("#end").css("display", "inline")
        $("#outcome").text(userChoice + " against " + compChoice + " ?")
        $("#winner").text("It's a tie!")
    }
    else if (userChoice === "rock") 
    {
        switch(compChoice)
        {
            case "paper":
                $("#end").css("display", "inline")
                $("#outcome").text("PAPER covers ROCK!")
                $("#winner").text("You LOSE!")
            break

            case "scissors":
                $("#end").css("display", "inline")
                $("#outcome").text("ROCK crushes SCISSORS!")
                $("#winner").text("You WIN!")
            break

            case "lizard":
                $("#end").css("display", "inline")
                $("#outcome").text("ROCK crushes LIZARD!")
                $("#winner").text("You WIN!")
            break

            default:
                $("#end").css("display", "inline")
                $("#outcome").text("SPOCK vaporizes ROCK!")
                $("#winner").text("You LOSE!")
            break
        }
    }
    else if (userChoice === "paper") 
    {
        switch(compChoice) 
        {
            case "rock":
                $("#end").css("display", "inline")
                $("#outcome").text("PAPER covers ROCK!")
                $("#winner").text("You WIN!")
            break

            case "scissors":
                $("#end").css("display", "inline")
                $("#outcome").text("SCISSORS cuts PAPER!")
                $("#winner").text("You LOSE!")
            break

            case "lizard":
                $("#end").css("display", "inline")
                $("#outcome").text("LIZARD eats PAPER!")
                $("#winner").text("You LOSE!")
            break

            default: 
                $("#end").css("display", "inline")
                $("#outcome").text("PAPER disproves SPOCK!")
                $("#winner").text("You WIN!")
        }
    }
    else if (userChoice === "scissors") 
    {
        switch(compChoice) 
        {
            case "scissors":
                $("#end").css("display", "inline")
                $("#outcome").text("ROCK crushes SCISSORS!")
                $("#winner").text("You LOSE!")
            break

            case "paper":
                $("#end").css("display", "inline")
                $("#outcome").text("SCISSORS cuts PAPER!")
                $("#winner").text("You WIN!")
            break

            case "lizard":
                $("#end").css("display", "inline")
                $("#outcome").text("SCISSORS decapitate LIZARD!")
                $("#winner").text("You WIN!")
            break

            default:
                $("#end").css("display", "inline")
                $("#outcome").text("SPOCK smashes SCISSORS!")
                $("#winner").text("You LOSE!")
        }
    }
    else if (userChoice === "lizard") 
    {
        switch(compChoice) 
        {
            case "rock":
                $("#end").css("display", "inline")
                $("#outcome").text("ROCK crushes LIZARD!")
                $("#winner").text("You LOSE!")
            break

            case "paper":
                $("#end").css("display", "inline")
                $("#outcome").text("LIZARD eats PAPER!")
                $("#winner").text("You WIN!")
            break

            case "scissors":
                $("#end").css("display", "inline")
                $("#outcome").text("SCISSORS decapitate LIZARD!")
                $("#winner").text("You LOSE!")
            break

            default:
                $("#end").css("display", "inline")
                $("#outcome").text("LIZARD poisons SPOCK!")
                $("#winner").text("You WIN!")
        }
    }
    else 
    {
        switch(compChoice)
        {
            case "rock":
                $("#end").css("display", "inline")
                $("#outcome").text("SPOCK vaporizes ROCK!")
                $("#winner").text("You WIN!")
            break

            case "paper":
                $("#end").css("display", "inline")
                $("#outcome").text("PAPER disproves SPOCK!")
                $("#winner").text("You LOSE!")
            break

            case "scissors":
                $("#end").css("display", "inline")
                $("#outcome").text("SPOCK smashes SCISSORS!")
                $("#winner").text("You WIN!")
            break

            default:
                $("#end").css("display", "inline")
                $("#outcome").text("LIZARD poisons SPOCK!")
                $("#winner").text("You LOSE!")
        }  
    }
})

Answer 4

您正在准备文档中的userChoice和compChoice检查，并且在文档准备好后您还没有点击任何内容。因此，在每次点击时，您都应该调用一个函数来检查您将发送变量的检查：

$(document).ready(function(){
    var userChoice = '', compChoice = 0;
    $('.rock').click(function() {
        userChoice = "rock";
        compChoice = Math.random();

        checkElement(userChoice, compChoice);
    });
    $('.paper').click(function() {
        userChoice = "paper";
        compChoice = Math.random();

        checkElement(userChoice, compChoice);
    });  

    $('.scissors').click(function() {
        userChoice = "scissors";
        compChoice = Math.random();

        checkElement(userChoice, compChoice);
    });    

    $('.lizard').click(function() {
        userChoice = "lizard";
        compChoice = Math.random();

        checkElement(userChoice, compChoice);
    });    

    $('.spock').click(function() {
        userChoice = "rock";
        compChoice = Math.random();

        checkElement(userChoice, compChoice);
    });
});

function checkElement(userChoice, compChoice){
    if (compChoice <= 0.20) {
        compChoice = "rock";
    } else if(compChoice <= 0.40) {
    compChoice = "paper";
    } else if(compChoice <= 0.60) {
        compChoice = "scissors";
    } else if(compChoice <= 0.80) {
        compChoice = "lizard";
    } else {
        compChoice = "spock";
    }



    if (userChoice === compChoice) {
        $("#end").css("display", "inline");
        $("#outcome").text(userChoice + " against " + compChoice + " ?");
        $("#winner").text("It's a tie!");
    }
}

Answer 5

这是解决问题的小提琴。

https://jsfiddle.net/tw8wgwn3/

有几个问题。首先，在click（）函数之外无法看到userChoice和compChoice，这可以通过在函数之外声明它们或创建新函数来传递它们来处理 - 这可能是更好的解决方案。第二个问题是用于分配值的JavaScript已经在用户单击图像时运行。通过创建新功能，您可以同时解决这两个问题。

$(document).ready(function(){
//What img does when mouse hovers on it
$("img").mouseenter(function(){
    $(this).css("height", "10em");
    $(this).css("width", "10em");
    $("selector").css("cursor", "pointer");
});
$("img").mouseleave(function(){
    $(this).css("height", "8em");
    $(this).css("width", "8em");
});



//Assigning values to userChoice (click on an img!)
$('.rock').click(function() {
    var userChoice = "rock";
    var compChoice = Math.random();
    checkCompChoice(compChoice);
    assignCompChoice(compChoice, userChoice);
});

$('.paper').click(function() {
    var userChoice = "paper";
    var compChoice = Math.random();
    checkCompChoice(compChoice);
    assignCompChoice(compChoice, userChoice);
});  

$('.scissors').click(function() {
    var userChoice = "scissors";
    var compChoice = Math.random();
    checkCompChoice(compChoice);
    assignCompChoice(compChoice, userChoice);
});    

$('.lizard').click(function() {
    var userChoice = "lizard";
    var compChoice = Math.random();
    checkCompChoice(compChoice);
    assignCompChoice(compChoice, userChoice);
});    

$('.spock').click(function() {
    var userChoice = "rock";
    var compChoice = Math.random();
    checkCompChoice(compChoice);
    assignCompChoice(compChoice, userChoice);
});

function checkCompChoice(compChoice){
    if (compChoice <= 0.20) {
        compChoice = "rock";
    } else if(compChoice <= 0.40) {
        compChoice = "paper";
    } else if(compChoice <= 0.60) {
        compChoice = "scissors";
    } else if(compChoice <= 0.80) {
        compChoice = "lizard";
    } else {
        compChoice = "spock";
    }
}
//Assign compChoice
function assignCompChoice(compChoice, userChoice){
    if (userChoice === compChoice) {
    $("#end").css("display", "inline");
    $("#outcome").text(userChoice + " against " + compChoice + " ?");
    $("#winner").text("It's a tie!");
    }
    else if (userChoice === "rock") {
        if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER covers ROCK!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes SCISSORS!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "lizard") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes LIZARD!");
            $("#winner").text("You WIN!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK vaporizes ROCK!");
            $("#winner").text("You LOSE!");
        }
    }
    else if (userChoice === "paper") {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER covers ROCK!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS cuts PAPER!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "lizard") {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD eats PAPER!");
            $("#winner").text("You LOSE!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER disproves SPOCK!");
            $("#winner").text("You WIN!");
        }
    }
    else if (userChoice === "scissors") {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes SCISSORS!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS cuts PAPER!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "lizard") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS decapitate LIZARD!");
            $("#winner").text("You WIN!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK smashes SCISSORS!");
            $("#winner").text("You LOSE!");
        }
    }
    else if (userChoice === "lizard") {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("ROCK crushes LIZARD!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD eats PAPER!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("SCISSORS decapitate LIZARD!");
            $("#winner").text("You LOSE!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD poisons SPOCK!");
            $("#winner").text("You WIN!");
        }
    }
    else {
        if (compChoice === "rock") {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK vaporizes ROCK!");
            $("#winner").text("You WIN!");
        }
        else if (compChoice === "paper") {
            $("#end").css("display", "inline");
            $("#outcome").text("PAPER disproves SPOCK!");
            $("#winner").text("You LOSE!");
        }
        else if (compChoice === "scissors") {
            $("#end").css("display", "inline");
            $("#outcome").text("SPOCK smashes SCISSORS!");
            $("#winner").text("You WIN!");
        }
        else {
            $("#end").css("display", "inline");
            $("#outcome").text("LIZARD poisons SPOCK!");
            $("#winner").text("You LOSE!");
        }    
    };
    }
});