通过html按钮改变变量

Changing variable by html button

本文关键字：变量 改变 按钮 html 通过      更新时间：2023-09-26

我正在学习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>

var user = "none";
function user(choice){
    var user = choice;
}
function test(click){
    alert("You chose " + user);
}

所以我认为在我点击Rock按钮后，它会将var user更改为Rock，但它没有。在我点击岩石然后点击调试按钮后，我得到"你选择了none"

<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);
}

var用于声明变量。你不需要在user函数中再次声明user变量。你只需要给一个声明过的值赋值。

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

一个问题:

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

user的一个变量隐藏了user的另一个变量

函数和变量名字相同是一个坏主意

在函数作用域中使用的var关键字将声明一个新的局部变量。

因此，在全局作用域中，user保留值"none"。

试试这个…清洁的标记。使用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/

似乎是一个范围问题。尝试删除函数中的var。

其他答案正在修复一些问题。还有一个问题，你调用函数的方式，因为你传递rock作为一个变量，你需要使用字符串:

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

除非你在某个地方声明了变量，但在你的代码中没有显示

选择应该用引号括起来，javascript正在寻找名为paper等的变量

<button onClick="user(rock)">Rock</button>
<button onClick="user(paper)">Paper</button>
<button onClick="user(scissors)">Scissors</button>
相关文章：