Changing variable by html button

Question

I'm learning javascript and I decided to create simple Rock, Paper, Scissors game. I want to make it controllable by buttons. So I made this in 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>

and this in .js file.

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

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

So I thought that after I click Rock button it will change var user to rock but it doesn't. After I click rock and then Debug button I get "You chose none".

Community · Accepted Answer · 2020-03-13 12:11:55Z

8

<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>

and

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

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

edited Mar 13, 2020 at 12:11

CommunityBot

11 silver badge

answered Mar 16, 2013 at 22:18

llvk

2482 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyrbi Over a year ago

This one helped me a lot. I found a mistake. :)

Can Geliş · Accepted Answer · 2013-03-16 22:14:19Z

4

var is used for declaring a variable. You don't need to declare user variable again in user function. You just need to assign a value to declared one.

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

answered Mar 16, 2013 at 22:14

Can Geliş

1,4742 gold badges11 silver badges19 bronze badges

1 Comment

Kyrbi Over a year ago

I did it same way you typed it and I still get "none" from debug button.

Steve Wellens · Accepted Answer · 2013-03-16 22:14:21Z

2

One problem:

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

One variable of user is hiding the other variable of user.

And having a function and variable with the same name is a BAD idea.

answered Mar 16, 2013 at 22:14

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:30:52Z

1

The var keyword used in the scope of a function will declare a new local variable.

Hence, in the global scope, user retains the value "none".

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Mar 16, 2013 at 22:16

Johannes P.

4,1634 gold badges28 silver badges27 bronze badges

Comments

Lucky Soni · Accepted Answer · 2013-03-16 22:31:46Z

1

Maybe try this.. cleaner markup.. uses 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/

answered Mar 16, 2013 at 22:31

Lucky Soni

6,8883 gold badges40 silver badges59 bronze badges

2 Comments

Kyrbi Over a year ago

Thank you. I don't wanna use jQuerry yet. I'm learning javascript right now and after that I wanna learn jQuerry. :)

Lucky Soni Over a year ago

good to know this :) you should learn JavaScript before you use a library.

Anthony · Accepted Answer · 2013-03-16 22:16:24Z

0

Seems like a scoping issue. Try removing the var inside the function.

answered Mar 16, 2013 at 22:16

Anthony

37.2k26 gold badges103 silver badges167 bronze badges

Comments

romainberger · Accepted Answer · 2013-03-16 22:17:19Z

0

The other answers are fixing some issues. There is also a problem with the way you're calling the functions as you're passing rock as a variable, you need to use a string:

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

Unless you're declaring the variables somewhere but it's not shown in your code.

answered Mar 16, 2013 at 22:17

romainberger

4,5582 gold badges37 silver badges51 bronze badges

3 Comments

Kyrbi Over a year ago

I fixed that. Now it's as you say:

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

romainberger Over a year ago

Don't use double quotes for the string in the attributes or this won't work

Kyrbi Over a year ago

Ahh that was the problem. Thank you!

suspectus · Accepted Answer · 2013-03-16 22:19:49Z

0

The selections should be encased in the quotes, javascript is looking for the variables named paper etc.

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

answered Mar 16, 2013 at 22:19

suspectus

17.4k8 gold badges56 silver badges63 bronze badges

Collectives™ on Stack Overflow

Changing variable by html button

8 Answers 8

1 Comment

1 Comment

Comments

Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related