If statement will not work for my javascript and html code-CodePudding

I am making a simple rock paper scissors game, so when you click on the button, it will say rock, paper or scissors. That works, however, I coded it to say "Rock has been chosen" when rock gets picked. Whenever rock shows up, it never shows up. I have tried using an on click, but that didnt work. I've also tried using double equals but that hasn't seemed to work either. Does anyone know how to fix it? Thank you so much.

Home.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock paper scissors</title>
<head>
</head>
<body>
    <p id="rand"></p>
    <p id="decider"></p>
    <button type="button" id="randi"> new choice </button>

    <script src="Home.js">

    </script>
</body>
</html>

Home.js:


function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min) );
}

const element = document.getElementById("randi");
element.addEventListener("click", Choose, check);

function Choose()  {
return document.getElementById("rand").innerHTML = choix[getRndInteger(0,3)];
}

function check() {
  if (Choose() === 'Rock'); {
    document.getElementById("decider").innerHTML = "rock has been chosen";
  }
}
const choix = ["Rock", "Paper", "Scissors"];

CodePudding user response：

addEventListener can have only one callback function - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min) );
}

const element = document.getElementById("randi");
element.addEventListener("click", Choose);

function Choose()  {
  const gameElement = choix[getRndInteger(0,3)];
  
  //output game element
  document.getElementById("rand").innerHTML = gameElement;
  
  //output message
  const decider = document.getElementById("decider");  
  if (gameElement === 'Rock'){
    decider.innerHTML = "rock has been chosen";
  } else {
    decider.innerHTML = '';
  }
} 

const choix = ["Rock", "Paper", "Scissors"];

CodePudding user response：

Your addEventListener also appears not to be correct, the third parameter (check) isnt valid.

The following might give the result you were trying for?

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) );
}

function choose()  {
    return document.getElementById("rand").innerHTML = choice;
}

function check() {
    if (choose() === 'Rock'); {
        document.getElementById("decider").innerHTML = "rock has been chosen";
    }
}
const choix = ["Rock", "Paper", "Scissors"];

document.getElementById("randi").addEventListener("click", check);

CodePudding user response：

You overcomplicate the issue and the need for an if-statement.

For the displaying of the AI choice, you simply should run a random pick from the array and then display the choice with a string. If you put the string into backticks you can include a variable there directly and name the choice.

After that, you properly need to compare the choice with the player pick with a switch-statement! A switch-statement only takes up to 1.6-2 times as much time as an if-statement. Means, a switch-statement is faster as soon as you need more then 1 if-statement

let choices = ['Rock', 'Paper', 'Scissors'];

document.querySelector('#randi').addEventListener('click', CPUchoice);

function CPUchoice() {
  let CPU_choice = choices[Math.floor(Math.random()*choices.length)];
  document.querySelector('#decider').textContent = `${CPU_choice} has been chosen!`;
  
  // if you actually want to use an switch statement:
  /*
  switch(choice) {
    case 'Rock':
      document.querySelector('#decider').textContent = 'Rock has been chosen!';
      break;
    case 'Paper':
      document.querySelector('#decider').textContent = 'Paper has been chosen!';
      break;
    case 'Scissors':
      document.querySelector('#decider').textContent = 'Scissors has been chosen!';
      break;
  }
  */
}

<p id="decider"></p>
<button type="button" id="randi"> new choice </button>