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

Asked

Viewed 254 times

0

I had made this game using textbox, and everything worked ok, but I decided to make a modification and instead of typing put respective images to the jokenpô and the image that the user click will be compared and return to the user who won, at first would be done in Alert same. My problem is taking the user option and assigning it to 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");
        }
    } 
   });

});
  • You can use the date attribute and set a value for each image. Ex: <img src="scissors.jpg" value date="scissors" /> Then you can recover the value of the attribute at the time of the click. var Choice = $(this). date("value");

2 answers

1

You can add the attribute name with a certain value your images or div that belong to

Example

Click the words to set 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>

  • Thank you, brother, for your attention and for helping me!

  • For nothing! We are there.

0


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

In your case only by guessing this in the function of the click will already work, because I take the ID of the selected element and compare with the computer choice (in case I put ID on buttons but you can do this in pictures)

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

Better understand how the this/$(this)

I made a 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>

<button id="pedra">Pedra</button>
<button id="papel">Papel</button>
<button id="tesoura">Tesoura</button>

  • Thank you very much, now I understand, I had used this. but I put it another way, once again, thank you for the excellent explanation and the example.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.