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: Hangman Welcome to the Hangman Word Guessing Game! Enter your name: Enter a word for the other player to guess: Enter the number of incorrect guesses allowed: Go 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: Player2 Welcome to the Hangman Word Guessing Game. Your word has been chosen by: ! Enter your name: You have guesses to guess the word. Word: Incorrect guesses: Enter a letter to guess: Guess 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: Document Word: Word chooser: Guesser: Play again
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>
Step by step
Solved in 7 steps with 9 images
