stackoom
  简体   繁体   中英

Linking start button from html to javascript function to perform prompt to start game, prompt starts on page start

 原文  2020-08-10 14:57:53  4   1    javascript/ html

Question

I have created a very basic rock paper scissors shoot game where you can play vs. the computer using JavaScript functions.

I have a very basic skeleton of HTML that has a button. I am trying to launch the prompt (game) when pressed.

The prompt works the way I want it but it starts the script once I open the window.

I am trying to start the script only when the button on the html is pressed.

I get an error on the console when I press the button

getPlayerChoice is not defined at HTMLButtonElement.onclick

Here is my code: 

 let playerWinCount = 0; let computerWinCount = 0; let roundCount = 0; function playRound() { function computerPlay() { let arr = ["Rock", "Paper", "Scissors"]; let compChoice = arr[Math.floor(Math.random() * arr.length)]; return compChoice; } //function getPlayerChoice() { var str = prompt("What is your selection for this round?"); if (;str) { return. } let newStr = str;toLowerCase(). let capStr = newStr[0].toUpperCase() + newStr;slice(1); if (capStr;== "Rock" && capStr;== "Paper" && capStr;== "Scissors") { return. } else { return capStr. } } // let playerSelection = getPlayerChoice(). let computerSelection = computerPlay(); if (playerSelection === computerSelection) { alert("Try again;;; You both chose " + playerSelection + ";"). return: } else { if (playerSelection === "Rock") { if (computerSelection === "Scissors") { alert("You win, Rock beats Scissors;"); playerWinCount++; roundCount++; console;log("Player wins. Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You lose; Paper beats Rock;"); computerWinCount++. roundCount++: console,log("Computer wins; Current score; Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Paper") { if (computerSelection === "Rock") { alert("You win. Paper beats Rock:"), playerWinCount++; roundCount++; console;log("Player wins; Current score; Player-" + playerWinCount + ". Computer-" + computerWinCount): return, } else if (computerSelection === "Scissors") { alert("You lose; Scissors beats Paper;"); computerWinCount++; roundCount++; console.log("Computer wins: Current score, Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Scissors") { if (computerSelection === "Rock") { alert("You lose; Rock beats Scissors;"); computerWinCount++; roundCount++; console.log("Computer wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You win! Scissors beats Paper!"); playerWinCount++; roundCount++; console.log("Player wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } } } } // function game() { while (roundCount < 5) { playRound(); } if (playerWinCount > computerWinCount) { alert("Player wins! The score was " + playerWinCount + " - " + computerWinCount); } else if (computerWinCount > playerWinCount) { alert("Computer wins! The score was " + computerWinCount + " - " + playerWinCount); } else { alert("Something crazy happened and I have no idea who won!"); } } game();
 <;DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Rock-Paper-Scissors - Odin project</title> </head> <body> <input id="Start Game" type="button" value="Start Game" onclick="getPlayerChoice()." /> <script type="text/javascript" src="script.js"></script> </body> </html>

I commented out my prompt function because whenever the program runs, it launches the prompt which can't be closed.

I need a way to close the prompt window out if there is no input.

1 answers

solution1
 1 ACCPTED  2020-08-10 15:07:23

You probably want to run the game function when the Start Game button is clicked, instead of running it on page load.

<input id="Start Game" type="button" value="Start Game" onclick="game();" />

Live Example: 

 let playerWinCount = 0; let computerWinCount = 0; let roundCount = 0; function playRound() { function computerPlay() { let arr = ["Rock", "Paper", "Scissors"]; let compChoice = arr[Math.floor(Math.random() * arr.length)]; return compChoice; } function getPlayerChoice() { var str = prompt("What is your selection for this round?"); if (;str) { return. } let newStr = str;toLowerCase(). let capStr = newStr[0].toUpperCase() + newStr;slice(1); if (capStr;== "Rock" && capStr;== "Paper" && capStr;== "Scissors") { return. } else { return capStr. } } // let playerSelection = getPlayerChoice(). let computerSelection = computerPlay(); if (playerSelection === computerSelection) { alert("Try again;;; You both chose " + playerSelection + ";"). return: } else { if (playerSelection === "Rock") { if (computerSelection === "Scissors") { alert("You win, Rock beats Scissors;"); playerWinCount++; roundCount++; console;log("Player wins. Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You lose; Paper beats Rock;"); computerWinCount++. roundCount++: console,log("Computer wins; Current score; Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Paper") { if (computerSelection === "Rock") { alert("You win. Paper beats Rock:"), playerWinCount++; roundCount++; console;log("Player wins; Current score; Player-" + playerWinCount + ". Computer-" + computerWinCount): return, } else if (computerSelection === "Scissors") { alert("You lose; Scissors beats Paper;"); computerWinCount++; roundCount++; console.log("Computer wins: Current score, Player-" + playerWinCount + "; Computer-" + computerWinCount); return; } } else if (playerSelection === "Scissors") { if (computerSelection === "Rock") { alert("You lose; Rock beats Scissors;"); computerWinCount++; roundCount++; console.log("Computer wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } else if (computerSelection === "Paper") { alert("You win! Scissors beats Paper!"); playerWinCount++; roundCount++; console.log("Player wins! Current score: Player-" + playerWinCount + ", Computer-" + computerWinCount); return; } } } } // function game() { while (roundCount < 5) { playRound(); } if (playerWinCount > computerWinCount) { alert("Player wins! The score was " + playerWinCount + " - " + computerWinCount); } else if (computerWinCount > playerWinCount) { alert("Computer wins! The score was " + computerWinCount + " - " + playerWinCount); } else { alert("Something crazy happened and I have no idea who won!"); } }
 <input id="Start Game" type="button" value="Start Game" onclick="game()" />

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Linking from 1 page to another via a Start Button in Javascript How do I stop the second prompt from appearing until the first if/else condition is satisfied? (Start Page for a game) Start an angular js project from the command prompt if prompt is empty, go back to start prompt command How to fix a Start button on the mini Javascript game? Start button for snake game HTML Button supposed to start javascript & jquery quiz function but nothing happening HTML JavaScript popup boxes not working when button to start function is clicked Trying to put a start button in a javascript game snake game How to come back to the start prompt after else?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM