Database System Concepts
Database System Concepts
7th Edition
ISBN: 9780078022159
Author: Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher: McGraw-Hill Education
Bartleby Related Questions Icon

Related questions

Question

Using query string with javascript, how do I populate the third page with the required information?

Page #3:

Congratulates the user, or informs them of their failure to guess the word. This page must show:

User 1 Name

User 2 Name

Word they were trying to guess

Page 1 html:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Hangman</title>

</head>

<body>

<h1>Welcome to the Hangman Word Guessing Game!</h1>

<p>Enter your name:</p>

<input type="text" id="name-input">

<p>Enter a word for the other player to guess:</p>

<input type="text" id="word-input">

<p>Enter the number of incorrect guesses allowed:</p>

<input type="number" id="guesses-input">

<button onclick="startGame()">Go</button>

<script src="script1.js"></script>

</body>

</html>

script1.js:

function startGame() {

const name = document.getElementById("name-input").value;

const word = document.getElementById("word-input").value;

const guesses = parseInt(document.getElementById("guesses-input").value);

sessionStorage.setItem("name", name);

sessionStorage.setItem("word", word);

sessionStorage.setItem("guesses", guesses);

window.location.href = "page2.html";

}

Page 2 html:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Player2</title>

</head>

<body>

<h1>Welcome to the Hangman Word Guessing Game. Your word has been chosen by: <span id="name"></span>!</h1>

<p>Enter your name:</p>

<input type="text" id="name-input">

<p>You have <span id="guesses"></span> guesses to guess the word.</p>

<p>Word: <span id="word"></span></p>

<p>Incorrect guesses: <span id="incorrect-guesses"></span></p>

<p>Enter a letter to guess:</p>

<input type="text" id="guess-input" maxlength="1">

<button onclick="guessLetter()">Guess</button>

<script src="script2.js"></script>

</body>

</html>

script2.js:

let word = sessionStorage.getItem("word").toLowerCase();

let guesses = parseInt(sessionStorage.getItem("guesses"));

let incorrectGuesses = [];

let guessedLetters = [];

 

function updateDisplay() {

document.getElementById("name").textContent = sessionStorage.getItem("name");

document.getElementById("guesses").textContent = guesses;

document.getElementById("word").textContent = getDisplayWord();

document.getElementById("incorrect-guesses").textContent = incorrectGuesses.join(", ");

}

 

function getDisplayWord() {

let displayWord = "";

for (let letter of word) {

if (guessedLetters.includes(letter)) {

displayWord += letter;

} else {

displayWord += "-";

}

}

return displayWord;

}

 

let GuesserName = ""

function guessLetter() {

const letter = document.getElementById("guess-input").value.toLowerCase();

GuesserName = document.getElementById("name-input").value;

if (!letter.match(/[a-z]/)) {

alert("Please enter a letter.");

return;

}

if (guessedLetters.includes(letter)) {

alert("You already guessed that letter.");

return;

}

guessedLetters.push(letter);

if (!word.includes(letter)) {

incorrectGuesses.push(letter);

guesses--;

}

if (guesses === 0) {

endGame(false);

} else if (getDisplayWord() === word) {

endGame(true);

} else {

updateDisplay();

}

}

 

function endGame(won) {

const message = won ? "Congratulations, you guessed the word!": "Sorry, you ran out of guesses. The word was " + word + ".";

const name = sessionStorage.getItem("name");

sessionStorage.clear();

sessionStorage.setItem("won", won);

sessionStorage.setItem("message", message);

sessionStorage.setItem("name", name);

sessionStorage.setItem("guesserName", GuesserName);

window.location.href = "page3.html";

}

updateDisplay();

Page 3 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>Document</title>

</head>

<body>

<p><span id="message"></span></p>

<p>Word: <span id="word"></span></p>

<p>Word chooser: <span id="wordChooser"></span></p>

<p>Guesser: <span id="guesser"></span></p>

<button onclick="playAgain()">Play again</button>

<script src="script3.js"></script>

</body>

</html>

 

Expert Solution
Check Mark
Knowledge Booster
Background pattern image
Computer Science
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
Recommended textbooks for you
Text book image
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Text book image
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Text book image
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
Text book image
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Text book image
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Text book image
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education