How to use a button along with a function?(Javascript/HTML)

Question

Hi, I’m writing a page with a Paper Stone or Scissors game. And I would like the user to be able to choose between the three options through three buttons, which when clicked call a function that assigns a value the variable relative to the user’s move, and then performs comparisons to know who won (Computer or User). My problem is that I can’t get the variable to receive the values equivalent to plays using the functions.

Note: My algorithm to compare the moves of both the PC and the User is working, so I didn’t post along.

var a = 0;

function Pedra() {
  return a = 1;
}

function Papel() {
  return a = 2;
}

function Tesoura() {
  return a = 2;
}

if (a == 1) {
  alert("pedra");
}
if (a == 2) {
  alert("Papel");
}
if (a == 3) {
  alert("tesoura");
}

<div>
  <div>
    <button type="button" onclick="Pedra()">Pedra</button>
  </div>

  <div id="papel">
    <button type="button" onclick="Papel()">Papel</button>
  </div>

  <div id="tesoura">
    <button type="button" onclick="Tesoura()">Tesoura</button>
  </div>
</div>

Answer 1

I don’t know if I understand your doubt, but come on.

1 - Methods in javascript follow the pattern camelCase, the first letter of the lower case method and the first letter of the remaining uppercase words. Name the methods as actions, in this case escolher (this did not influence your code not working, only good practice even)

2 - No need for return in each method, since you only need to assign the value to the variable a that is declared globally

3 - For each click, it is necessary to call the method verificarEscolha(), so you will be able to actually display the selected value at each button click.

var a = 0;

function escolherPedra() {
  a = 1;
  verificarEscolha()
}

function escolherPapel() {
  a = 2;
  verificarEscolha()
}

function escolherTesoura() {
  a = 3;
  verificarEscolha()
}

function verificarEscolha(){
  if (a == 1) {
    alert("pedra");
  }
  if (a == 2) {
    alert("Papel");
  }
  if (a == 3) {
    alert("tesoura");
  }
}

<div>
  <div>
    <button type="button" onclick="escolherPedra()">Pedra</button>
  </div>

  <div id="papel">
    <button type="button" onclick="escolherPapel()">Papel</button>
  </div>

  <div id="tesoura">
    <button type="button" onclick="escolherTesoura()">Tesoura</button>
  </div>
</div>

Answer 2

Since I don’t know how the rest of your code looks, I’m going to assume that your only problem really is that you’re not able to change the value of to.

Technically your code is "correct". So one possibility is that you are not actually changing the same variable to which was declared at the beginning.

The only possibility for this is a scope problem:
If the variable to is not global, the variable to out of the functions is one, and the variables to are others, where each is different / independent.
So you’d actually be changing different variables.

To resolve this try to declare the variable to out of any function.

---

Try to make your code similar to this one ( that’s working), and then change the testing to see where the error is:

 <script>

    function imprimeValorDoa(){
        alert("o valor de a é : " + a);
    }
    var a = 0;

    function Pedra() {
      a = 1;
    }

    function Papel() {
      a = 2;
    }

    function Tesoura() {
      a = 3;
    }

</script>

<div>
  <div>
    <button type="button" onclick="Pedra(); imprimeValorDoa()">Pedra</button>
  </div>

  <div id="papel">
    <button type="button" onclick="Papel(); imprimeValorDoa()">Papel</button>
  </div>

  <div id="tesoura">
    <button type="button" onclick="Tesoura(); imprimeValorDoa()">Tesoura</button>
  </div>
</div>

Note: what could be happening in your code is that actually was changing the value of a correctly. However if(a == ...) was executed before clicking the button.
This happens because the if is inside the script, and all the scripts are executed in full when the html page is loaded.

Answer 3

An even simpler way would be to pass the option that the user chose as a function parameter and there do the check

In this example I did with switch case, if you prefer you can keep the if else

function jogar(usuario) {
  switch(usuario) { 
    case 1:
      alert("pedra");
      break;
    case 2:
      alert("Papel");
      break;
    case 3:
      alert("tesoura");
      break;
    default:
      alert("Opção inválida");
      break;
  }
}

<div>
  <div>
    <button type="button" onclick="jogar(1)">Pedra</button>
  </div>

  <div id="papel">
    <button type="button" onclick="jogar(2)">Papel</button>
  </div>

  <div id="tesoura">
    <button type="button" onclick="jogar(3)">Tesoura</button>
  </div>
</div>