通过 html 按钮更改变量

Question

我正在学习 javascript，我决定创建简单的石头剪刀布游戏。我想让它可以通过按钮控制。所以我用html做了这个：

<div id="game">
    <button onClick="user(rock)">Rock</button>
    <button onClick="user(paper)">Paper</button>
    <button onClick="user(scissors)">Scissors</button>
    <div id="result"></div>
    <br>
    <br>
    <button onClick="test()">DEBUG</button>
</div>

这个在 .js 文件中。

var user = "none";
function user(choice){
    var user = choice;
}

function test(click){
    alert("You chose " + user);
}

所以我认为单击 Rock 按钮后，它会将 var 用户更改为 rock，但事实并非如此。在我点击 rock 然后 Debug 按钮后，我得到“你没有选择”。

Answer 1

<div id="game">
    <button onClick="choose('rock')">Rock</button>
    <button onClick="choose('paper')">Paper</button>
    <button onClick="choose('scissors')">Scissors</button>
    <div id="result"></div>
    <br>
    <br>
    <button onClick="test()">DEBUG</button>
</div>

和

var user;
function choose(choice){
    user = choice;
}

function test(click){
    alert("You chose " + user);
}                         

Answer 2

也许试试这个.. 更清晰的标记.. 使用 jQuery

<div id="game">
    <button class="user" data-name="rock">Rock</button>
    <button class="user" data-name="paper">Paper</button>
    <button class="user" data-name="scissors">Scissors</button>
    <div id="result"></div>
    <br>
    <br>
    <button id="test">DEBUG</button>
</div>


$(document).ready(function() {
    var user = "none";
    $(".user").click(function() {
       user = $(this).attr("data-name");
    });

    $("#test").click(function() {
       alert(user);
    });
});

http://jsfiddle.net/rQDbe/

Answer 3

选择应该包含在引号中，javascript 正在寻找名为 paper 等的变量。

<button onClick="user(rock)">Rock</button>
<button onClick="user(paper)">Paper</button>
<button onClick="user(scissors)">Scissors</button>

Answer 4

其他答案正在解决一些问题。当您将rock 作为变量传递时，调用函数的方式也存在问题，您需要使用字符串：

<button onClick="user('rock')">Rock</button>

除非你在某处声明了变量，但它没有显示在你的代码中。

Answer 5

似乎是范围界定问题。尝试删除函数内的 var。

Answer 6

在函数范围内使用的var关键字将声明一个新的局部变量。

因此，在全局范围内，user 保留值 "none"。

Answer 7

一个问题：

var user = "none";
function user(choice){
    var user = choice;
}

用户的一个变量隐藏了用户的另一个变量。

同时拥有同名的函数和变量是个坏主意。

Answer 8

var 用于声明变量。您不需要在user 函数中再次声明user 变量。您只需为声明的值分配一个值。

var user; //declaration
function user(choice) {
    user = choice; //assignment
}