Changing Javascript variable using HTML buttons

Question

I'm building a Rock, Paper, Scissors game using JavaScript and HTML. I made the game work in the console, and now I'm just adding a UI to it. I'm having an issue setting the playerChoice variable using HTML buttons (I was using a prompt before, but that's not very user-friendly).

What I've tried doing is making a function that is supposed to set playerChoice to whatever button is clicked. I set the onClick method for my buttons to run this function, and use the button's value as an input parameter. However, I'm getting "input not defined errors" when I test this.

let playerChoice = ""
function setPlayerChoice(choice){
    playerChoice = choice;
}

<button class="button" id="btnRock" onClick=setPlayerChoice("rock")>Rock</button>
<button class="button" id="btnPaper" onClick=setPlayerChoice("rock")>Paper</button>
<button class="button" id="btnScissors" onClick=setPlayerChoice("scissors")>Scissors</button>

score 1 · Accepted Answer · answered Aug 12 '19 at 02:49

Try this.

let playerChoice = ""

function setPlayerChoice(choice) {
  playerChoice = choice;
  console.log(playerChoice);
}

<button class="button" id="btnRock" onClick="setPlayerChoice('rock')">Rock</button>
<button class="button" id="btnPaper" onClick="setPlayerChoice('paper')">Paper</button>
<button class="button" id="btnScissors" onClick="setPlayerChoice('scissors')">Scissors</button>

score 0 · Answer 2 · answered Aug 12 '19 at 02:50

HTML

<button class="button" id="btnRock" onClick=setPlayerChoice("rock")>Rock</button>
<button class="button" id="btnRock" onClick=setPlayerChoice("paper")>Paper</button>
<button class="button" id="btnRock" onClick=setPlayerChoice("scissors")>Scissors </button>

Javascript

var playerChoice = "";
function setPlayerChoice(choice) {
  playerChoice = choice;
}

Changing Javascript variable using HTML buttons

2 Answers2