
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 stepSolved in 7 steps with 9 images

- Table rows are created by using which tag? Group of answer choices <tablerow> <row> <tr> <trow> this is for HTMLarrow_forwardA URL (Uniform Resource Locator) is an identifier used to locate resources on the web. A URL is composed of the following components: Scheme, Host Name (with optional Port Number), Path, (optional) Query String, (optional) Anchor. These components are arranged in the following format:Scheme://Hostname:Port/Path?QueryString#AnchorFor example, in the URL "https://en.wikipedia.org:443/wiki/Kitten?printable=yes&download=no#External_links": "https" is the Scheme, "en.wikipedia.org" is the Hostname, 443 is the Port Number, "wiki/Kitten" is the Path, "printable=yes&download=no" is the Query String, and "External_links" is the Anchor.The Port Number is typically omitted when default port numbers are used by the hostname server (80 for http, 443 for https). When Path and Query String are empty, the '/' character before the Path becomes optional, e.g, as in the url: 'https://en.wikipedia.org'.Write a function url2hostname that takes in a URL and returns the hostname (without the port…arrow_forwardWeb Page: http://web.archive.org/web/20210411193535/https://docs.python-requests.org/en/master/ Inspect the Title Text (Requests: HTTP for HumansTM). What kind of element is it (what is its HTML tag)?arrow_forward
- Make up a table of data. Your table must have at least four rows and four columns. It must have at least one rowspan and one colspan attribute. The value for these attributes must be greater than 1. You can make up your own data. However, the table does have to make sense. Please name this file part one.html,arrow_forwardIn this project you will use selection lists to store long lists of hypertext links that might overwhelm a page if displayed within a navigation list. The name of a linked page is displayed as the text of a selection list option while the URL is stored as that option's value. By selecting an item from one of the selection list options, the browser will open the web page with that selected URL. To script this action, you will use the event object. One of the properties associated with the event object is as follows: evt.target where evt is the variable name assigned to event object and target is the object that received the event. In this project the target is the option selected by the user from one of the selection lists. The event will be the change event. A preview of the page is shown in Figure 6-39arrow_forwardAlert dont submit AI generated answer.arrow_forward
- <!-- Write your code here --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Chapter 1, Extend Your Knowledge <p> Benjamin Bain, 9/10/2021 <hr> <p> Guideline 1.1arrow_forwardb) The following is the body of a web document titled index.html: Write a city: (i) Create a drawing of what will appear on the web page when it is opened in a web browser. (ii) Describe what would happen after a user submits the form with the city name and write an example. (iii) Write a PHP statement in the document search.php to display the city submitted in (ii). (iv) Describe what would happen after a user submits the form with une city name if the method used is GET (replacing the POST method in search.php ) with an examplearrow_forwardChange the text color of first <li>one</li> in a HTML unordered list? example HTML: <ul> <li>one</li> /* text should be color red*/ <li>two</li> <li>three</li> <li>four</li> <ul>arrow_forward
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education





