Assign a variable the value of a click on an image to make a comparison

Question

Assign a variable the value of a click on an image to make a comparison

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I made this game using textbox, and everything worked ok, but I decided to make a modification and instead of typing I put the respective images to the jokenpô and the image that the user clicks will be compared and would return to the user who won, from start would be done on the alert itself. My problem is in picking up the user's option and assigning a variable and making that comparison. How can I do this?

$(document).ready(function(){

var choice = null;  
//Gera a opção do computador
var computerChoice = Math.random();

if (computerChoice < 0.34) {
    computerChoice = "Pedra";

} else if(computerChoice <= 0.67) {
    computerChoice = "Papel";
} else {
    computerChoice = "Tesoura";
} 

//Pedra
$('#pedra, #papel, #tesoura').on('click',function(){

    if((computerChoice == choice) || (computerChoice == choice)||(computerChoice == choice))
            alert("Empate");
    else if (choice === "pedra") {
      if (computerChoice === "tesoura")
            alert("pedra vence");
        else {
            alert("papel vence");
        }
    }
    else if (choice === "papel") {
        if (computerChoice === "pedra")
            alert("papel vence");
        else {
            alert("tesoura vence");
        }
    }
    else if (choice === "tesoura") {
        if (computerChoice === "pedra")
            alert("pedra vence");
        else {
            alert("tesoura vence");
        }
    } 
   });

});

javascript html jquery

asked by anonymous 24.10.2017 / 15:38

2 answers

0

You can add the name attribute with the given value to your images or div that belong to them

Example

Click the words to define the variable.

$('div').on('click', function(){

  var escolha = $(this).attr('name');
  $('span').html('');
  $('span').html('O valor da variável é: '+escolha);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div name='pedra'>Pedra</div>
<div name='papel'>Papel</div>
<div name='tesoura'>Tesoura</div>

<span></span>

24.10.2017 / 15:50

Run command in android through firebase notification How to kill this printing process of mozilla?

score 0 · Accepted Answer

Just use $(this) within the click function, in case it will point to the button that triggered the click event and allow you to identify which image was chosen.

In your case just adding this to the click function will already work, because I get the ID of the selected element and compare it to the computer choice ( in this case I put ID in buttons but you can do this in images )

 var choice = $(this).prop("id").toLowerCase(); 
 computerChoice = computerChoice.toLowerCase();

Understand better how this / $ (this)

I made an example , see below:

$(document).ready(function(){

var choice = null;  
//Gera a opção do computador
var computerChoice = Math.random();

if (computerChoice < 0.34) {
    computerChoice = "pedra";

} else if(computerChoice <= 0.67) {
    computerChoice = "papel";
} else {
    computerChoice = "tesoura";
} 

//Pedra
$('#pedra, #papel, #tesoura').on('click',function(){

    //Obtenho a escolha do usuário
    var choice = $(this).prop("id").toLowerCase(); 
    computerChoice = computerChoice.toLowerCase();
    
    console.log('Escolha do pc: ' + computerChoice);
    console.log('Escolha da pessoa: ' + choice);

    if((computerChoice == choice) || (computerChoice == choice)||(computerChoice == choice))
            alert("Empate");
    else if (choice === "pedra") {
      if (computerChoice === "tesoura")
            alert("pedra vence");
        else {
            alert("papel vence");
        }
    }
    else if (choice === "papel") {
        if (computerChoice === "pedra")
            alert("papel vence");
        else {
            alert("tesoura vence");
        }
    }
    else if (choice === "tesoura") {
        if (computerChoice === "pedra")
            alert("pedra vence");
        else {
            alert("tesoura vence");
        }
    } 
   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="pedra">Pedra</button>
<button id="papel">Papel</button>
<button id="tesoura">Tesoura</button>