Rock Paper Scissors game... CANNOT FIGURE OUT

Question

it's my first time on stack overflow and I have a MASSIVE question. I am looking to join a bootcamp and they are having me to a code challenge. I am at the last step of placing buttons on my HTML page that runs the rock paper scissors games but I cannot figure out how to link an HTML button to javascript function. Also, I don't know how to create a javascript function that runs as the HTML button is clicked. Please HELP!

<head>
   <title>Lapis Papyrus Scalpellus</title>
  </head>

<body>
  <h1>Lapis Papyrus Scalpellus</h1>
  <h2>Welcome to the ancient Showdown!!</h2>

<div>
  <button id="Lapis">Lapis</button> 
  <button id="Papyrus">Papyrus</button> 
  <button id="Scalpellus">Scalpellus</button>
</div>

    <h3>Pick your choice above!</h3>
  <p id=results></p>
</body>





JAVASCRIPT

//Player's choice is everychanging so use let; USE OBJECT
let playerChoice = {
  move: null,
}    
//Computer's choice is everchanging so use let; USE OBJECT
let computerChoice = {
  move: null,
}

document.querySelector(".Lapis").onclick = function(e) {
  console.log(e.target);
}

//ONLY 3 choices so keep it constant; USE ARRAY; 
const choices = ["Lapis", "Papyrus", "Scalpellus"];
playerChoice.move = choices[0];

//Runs the formula randomly through "choices" array and rounds down the answer; Below code is wrapped in computer choice function.
function computerChooses() {    
  const indexChoices = Math.floor(Math.random() * choices.length);     
  computerChoice.move = choices[indexChoices];  
}

computerChooses();

//Changed console.log to document.write to see if it prints on HTML and it works.
function compareChoices(){
if (playerChoice.move === computerChoice.move) {
    document.write("The game is a tie. Both players chose " + computerChoice.move + "!");
  }else if (computerChoice.move === choices[2]){
    if (playerChoice.move === choices[0]){
      document.write("Player chose " + playerChoice.move + " and Computer chose " + computerChoice.move + ", Player Wins!");
  }else {
    document.write("Computer chose " + computerChoice.move + " and Player chose " + playerChoice.move + ", Whomp Whomp WHOMP Computer Wins!");
  }
}else if (computerChoice.move === choices[0]){
    if (playerChoice.move === choices[1] ){
      document.write("Player chose " + playerChoice.move + " and Computer chose " + computerChoice.move + ", Whomp Whomp WHOMP Computer Wins!");
  }else {
    document.write("Computer chose " + computerChoice.move + " and Player chose " + playerChoice.move + ", Player Wins!");
  }
}else if (computerChoice.move === choices[1]){
    if (playerChoice.move === choices[2] ){
      document.write("Player chose " + playerChoice.move + " and Computer chose " + computerChoice.move + ", Player Wins!");
  }else{
    document.write("Computer chose " + computerChoice.move + " and Player chose " + playerChoice.move + ", Whomp Whomp WHOMP Computer Wins!")
   }
  }
 }


//called compareChoices function to let the game start
compareChoices();

Does this answer your question? [Using an HTML button to call a JavaScript function](https://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function) — Ken Y-N, May 14 '20 at 05:18
Refer to this Question as it should help. [Question](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) — Adam ElHawary, May 14 '20 at 05:25
Welcome to Stack Overflow. You will have a better experience here if you take the [tour](https://stackoverflow.com/tour), read through [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask), then write your question with details to [create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). Regards — eloibm, May 14 '20 at 06:51

score 0 · Answer 1 · answered May 14 '20 at 05:19

0

let yourButton = document.querySelector('.your_button_selector')
yourButton.addEventListener('click', function(){/*your code here*/})

if i understand your problem right, here is solution ^^

It will be better for you to read how works eventListeners and how to trigger events and run functions according this events

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

answered May 14 '20 at 05:19

Paul Zaslavskij

638
3
9

Thank you so much! I'll give it a shot. Also the second part of that question was what should the function code be to trigger the playerChoice.move to select a specific array item from the array? – Ali Rizvi May 14 '20 at 16:07

Rock Paper Scissors game... CANNOT FIGURE OUT

1 Answers1