If statement is NOT working

I am making a Rock, paper, scissor game. But the If statement of the code is not working. What can I do?

47 Replies

I am going to guess that you intend for the if statement to run after the onclick methods fire. Unfortunately, it is defined right on the window. So it gets called as soon as the file loads.

Sste•15mo ago

woww. What can I do to resolve it?

Joao•15mo ago

Actually it looks like its inside the randomItems function, or?

Queequeg•15mo ago

I am immediately wrong, I missed the context.

Joao•15mo ago

@Sstephanyyy Can you share the code over on codepen.io or similar?

Sste•15mo ago

yes, it is inside yeaH. Just a moment,pls

Joao•15mo ago

But actually I think you are correct in that the event listener is being added every time the function is called. Rather, the event listener should be moved up to the window. That may be it

glutonium•15mo ago

it doesn't show any errors? in console

Sste•15mo ago

https://codepen.io/ssstephanyyy/pen/LYJvEEQ

ssstephanyyy

CodePen

LYJvEEQ

...

Sste•15mo ago

not

Sste•15mo ago

in the console, show the computer choice

Queequeg•15mo ago

I like your style @Sstephanyyy - it looks good.

Sste•15mo ago

thanks. Sorry, it is in another language

Queequeg•15mo ago

The problem appears to be that the logic that does the judging isn't getting called on the click.

Sste•15mo ago

really? why?

Queequeg•15mo ago

It gets called immediately when the file loads, which does create the listeners, but those listeners only update the state (personChoice) without calling on the code to update. Try moving this:

    if(computer === personChoice){
        document.getElementById('result').innerHTML = `Deu empate ${computer} é igual ao escolhido `;
        console.log('deu empate')
    }

    if(computer === personChoice){
        document.getElementById('result').innerHTML = `Deu empate ${computer} é igual ao escolhido `;
        console.log('deu empate')
    }

Into a function, and then call it in the event handlers.

glutonium•15mo ago

here, since u r defining the value of personalChoice using querySelectorAll, doesn't that mean the personalChoise is actually an Array here?

Sste•15mo ago

I used the queryselectorall to get all the squares and then put the onclik. So, I think it is an array

glutonium•15mo ago

so if it's an array, how can u define the value of an array using =

Sste•15mo ago

what do you mean? I am still a beginner, can not understand properly what you are saying

glutonium•15mo ago

is already has 3 values so doing personalChoice = "rock" / "paper" / "sissor" doesn't make sense

Sste•15mo ago

what is the right way to do it?

Joao•15mo ago

The gist of this game is that you need to calculate the winning conditions on every round. So everytime you click on a square, you have to 1) check where the user clicked and make a selection accordingly, 2) randomly generate a selection for the computer and 3) compare them.

Sste•15mo ago

in the if statement, I am trying to compare the computer choice with the person choice

glutonium•15mo ago

well delete the query selector part try only keeping let personChoice basically keep the value undefined then you'll give it a value depending on which button the user clicks

Sste•15mo ago

let personChoice = ' '; this way?

glutonium•15mo ago

noo let peronChoice; that'll keep the value undefined untill user clicks the button

Sste•15mo ago

okay just this or I have to change more thigns in the code?

Joao•15mo ago

The logic to compare the options is correct. The reason why it doesn't seem to work is because you are expecting it to check whenever you click on it. Currently, you are only running that code when the page loads.

Sste•15mo ago

because, still doens't work

glutonium•15mo ago

and also put the if condition inside a function and then call the function when clicked

Sste•15mo ago

I get it what you said, but I don'tknow how to write this in code format

Queequeg•15mo ago

This code clears up a lot of the problems:

const rock = document.getElementById('squareOne');
const paper = document.getElementById('squareTwo');
const scissors = document.getElementById('squareThree');

const options = ["rock","paper","scissors"]; // Cada um possui um índice. 0, 1 e 2

function judge(personChoice) {
    const computer = Math.floor(Math.random() * options.length);

    console.log(computer, options[computer])

  console.log('judge', personChoice, options[computer])
      if(options[computer] === personChoice){
        document.getElementById('result').innerHTML = `Deu empate ${computer} é igual ao escolhido `;
        console.log('deu empate')
    }
}

function randomItems(){

    rock.onclick = (event)=>{
        judge('rock');
    }

    paper.onclick = (event)=>{
        judge('paper');
    }

    scissors.onclick = (event) =>{
        judge('scissors');
    }

}

randomItems()

const rock = document.getElementById('squareOne');
const paper = document.getElementById('squareTwo');
const scissors = document.getElementById('squareThree');

const options = ["rock","paper","scissors"]; // Cada um possui um índice. 0, 1 e 2

function judge(personChoice) {
    const computer = Math.floor(Math.random() * options.length);

    console.log(computer, options[computer])

  console.log('judge', personChoice, options[computer])
      if(options[computer] === personChoice){
        document.getElementById('result').innerHTML = `Deu empate ${computer} é igual ao escolhido `;
        console.log('deu empate')
    }
}

function randomItems(){

    rock.onclick = (event)=>{
        judge('rock');
    }

    paper.onclick = (event)=>{
        judge('paper');
    }

    scissors.onclick = (event) =>{
        judge('scissors');
    }

}

randomItems()

glutonium•15mo ago

rn the if runs as soon as js loads u want it to run when button is clicked

Sste•15mo ago

it is already inside yes

glutonium•15mo ago

yes so you need to put the if condition in it's own function and call it when button is clicked rn it's inside the same function with the button.onclick

Joao•15mo ago

Ok let me give you a hint just a sec

Sste•15mo ago

thankss. But why did you create two functions?

glutonium•15mo ago

where is the condition tho

Queequeg•15mo ago

The important changes: 1.) call judge when the user clicks 2.) create a new random value each click (good work on generating this "AI" portion by the way) 3.) the "computer" value was actually be used as a number instead of an index into the options array The randomItems function can be removed entirely if you want. I just didn't want to rewrite everything you were doing. The important function is judge which I call every time they click. What is important is not that they exist in a function, but when the function is called. randomItems gets called only once. When the file loads. judge gets called in each event handler.

Joao•15mo ago

const rock = document.getElementById('rock');
const paper = document.getElementById('paper');
const scissors = document.getElementById('scissors');
const options = document.querySelector('.options');

options.addEventListener('click', (event) => {
  const humanChoice = event.target.id;
  
  if (!humanChoice) return;
  
  calculateWinner(humanChoice);
});

function calculateWinner(humanChoice) {}

const rock = document.getElementById('rock');
const paper = document.getElementById('paper');
const scissors = document.getElementById('scissors');
const options = document.querySelector('.options');

options.addEventListener('click', (event) => {
  const humanChoice = event.target.id;
  
  if (!humanChoice) return;
  
  calculateWinner(humanChoice);
});

function calculateWinner(humanChoice) {}

Ok first of all, I've renamed the elements from squareOne, etc to their actual values: rock, paper, scissors This makes things so much easier later on. For example you can just know right ahead what the user clicked based on the element's id. Notice options now is what you called squares. That's jsut my own way of thinking and the anme here does not matter. What matters is that I'm telling it to listen for click events. This way, every time you click on it it will run the function we are providing. Human choice will be equal to the id of the element we clicked, which conveniently is one of rock, paper or scissors. Or undefined, if you click on the background which is why I'm checking for that as well. If it's undefined just return, do nothing. Once you have the humanChoice variable, you can run another function that I'm calling calculateWinner. HEre is where you can calculate the computer's option and compare it. For reference, in the future don't use el.onClick as that's the old syntax that while it works is not recommended. Create an event listener like I did. The reason being that you can later remove them and keep track of them much easily. If none of this makes sense, just ask 😄

Sste•15mo ago

thanks for the help Joao could I use the foreach functionality as well?

Joao•15mo ago

Of course 🙂

glutonium•15mo ago

@Sstephanyyy https://codepen.io/-bloop-/pen/ExeJaqe

Tahzib Ebad

CodePen

ExeJaqe

...

glutonium•15mo ago

k so after opening your code in my editor i realized there was quite a few mistakes u made the biggest one was, your compuer variable has an integer value but your personChoice had string value and in the condition u were trying to math the string with the integer if u compare my code with yours you'll understand what I'm talking about

Sste•15mo ago

thanks for the help

glutonium•15mo ago

Gaming

Programming

If statement is NOT working