Use information from an Event in if Else

Asked

Viewed 27 times

-3

People, I’m doing an exercise to create a set of stone, paper and scissors. Within the development I arrived at a problem, my if statement is not working. To with 1 month of programming only, then ta half complex hahah


$(".circle").click((e) => {
  const paper = $("#paper");
  const scissors = $("#scissors");
  const rock = $("#rock");
  const event = e.currentTarget;

  if (event === paper) {
    scissors.addClass("hide");
    rock.addClass("hide");
    $("#triangle").addClass("hide");
  } else if ...*CÓDIGO CONTINUA A MESMA LÓGICA*

I also have the console.log from const paper and const Event

console paper

S.fn.init [div#paper.circle.paper]
0: div#paper.circle.paper
length: 1
proto: Object(0)

console event

<div id="paper" role="button" class="circle paper">
   <img src="images/icon-paper.svg" alt="" />
</div>

In my little understanding of programming I find myself not knowing what to do!!

Somebody help me out there?

if else event-listener

1 answer

0


From what I saw you used the event to know which button you clicked on. In this case, it would be easier to use this. this can, in non-technical terms, resume the initial code selector.

For example: if you have this function:

$('#botao').on('click', function() {
  alert( $(this).attr('id') );
});

this will refer to the #botao, and therefore the alert will show the value of the attribute id of the specific button.

I made a example of stone code, paper and scissors for you to see how you can use it in practice. It is super useful. In addition, I also present to you the conditional structure switch.

Instead you include a lot of if and else if for the same value, you can simply use a switch. The code gets cleaner and better to read. Look at the difference below:

var teste = 'Pedro';

if (teste == 'Ana') {
  // código
} else if (teste == 'Bruno') {
  // código
} else if (teste == 'Cláudia') {
  // código
} else if (teste == 'Pedro') {
  // código
} else {
  // o que sobrou
}

var teste = 'Pedro';

switch (teste) {
  case ('Ana'): // mesma coisa que (teste == 'Ana')
    // código
    break; // serve para finalizar o switch não ir para os outros cases abaixo.

  case ('Bruno'):
    // código
    break;

  case ('Cláudia'):
    // código
    break;

  case ('Pédro'):
    // código
    break;

  default:
    // o que sobrou
    break;
}

Note that at the end of switch I declared a default. If there is no case equal to the value, the default is used, as if it were a kind of else. I hope I’ve helped!

  • Bro, I’m still looking at the example you made of the game, but I think you saved my life here. It was worth too

  • @Gabriel, has n ways to make this little game, just like any other code. It’s the same thing as writing sentences. You can create a phrase with the same meaning as mine using other words. See what you like in my code and start using too, but the important thing is you try to create your version, train what you have learned. Hugs!

  • I tried it here and it kept not working using this. I had tried it before and when I do a console.log it doesn’t return an id. When I do the way you showed, my return is Undefined. My "boot" is a div I’ve put role="button" pq to using image and other things like button. Maybe that’s it? Even so, I don’t know why I can’t do it with this and the currentTarget, since the return of it is the same as my paper/terousa/stone

Browser other questions tagged if else event-listener

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