On one of the pages on my site, the user will have the option to select which one they want between the beanie quiz and beanie generator. I don't know how to create javascript where when the user selects which one they want it will take them to the hidden page where it is either the quiz or the generator based on the user selection.
The code below is what I have on the main page once the user selects an option I want it to direct them to one of my hidden pages either the "BeanieQuiz or BeanieGenerator page based on what they choose. How will I create javascript for it? Thanks for your help in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>BEANIE GENIE</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="grid-container">
<header class="headerimg">
<img src="Images/bigger thing.png" align="left">
</header>
<header class="headertxt">
<h1>BEANIE GENIE</h1>
</header>
<nav class="nav">
<div class="topnav">
<a href="index.html">HOME</a>
<a href="Page 1.html">WISH</a>
<a href="Page 2.html">BEANIE BUDDY</a>
<a href="Page 3.html">CONTACT US</a>
</div>
</nav>
<aside class="aside">
<h1>THE WISH PAGE IS WHERE YOU WILL GET TO CHOOSE YOUR BEANIE. EITHER YOU CAN CHOOSE THE BEANIE QUIZ OR A RANDOM BEANIE GENERATOR.</h1>
</aside>
<main class="main">
<h2>CHOOSE AN OPTION ON THE DROPDOWN MENU BELOW! </h2>
<label for="beanie">Select an option:</label>
<select onsubmit="BeanieQuiz ()" id="beanie">
<option value="Blank"></option>
<option value="BeanieQuiz" id="quiz">Beanie Quiz</option>
<option value="Generator">Random Beanie Generator</option> <br>
</select>
<input type="submit" value="Submit">
</main>
<footer class="footer">
<h1> Contact Us! </h1>
<p> Business: Beanie Genie </p>
<p> Phone Number: 470-309-8251 </p>
<p> Email: BeanieG@gmail.com </p>
</footer>
</div>
To hide all elements in a class:
document.querySelector(".content1").style.display = "none"
To show all elements in a class
document.querySelector(".content2").style.display = "block"
(EDIT) From what I understood, you want to get the user's selection in your dropdown box?
var user_selection = document.getElementById("beanie").value
if(user_selection=="BeanieQuiz"){
// User selected Beanie Quiz
BeanieQuiz()
}
if(user_selection=="Generator"){
// User selected Beanie Generator
BeanieGenerator()
}
If you meant that you want to keep the user on the same HTML page, but you just want to switch the view, you can do what Mint have mentioned
document.querySelector('#beanie').addEventListener('change', (e) => {
document.querySelectorAll('.page').forEach(el => el.style.display = "none") // to reset back to hidden
const page = document.getElementById(`page-${e.target.value}`)
page.style.display = 'block'
}).page {
display: none;
}<div class="page" id="page-BeanieQuiz">
<h1>Beanie Quiz Page</h1>
<div>content goes here...</div>
</div>
<div class="page" id="page-Generator">
<h1>Random Beanie Generator Page </h1>
<div>content goes here...</div>
</div>
<select id="beanie">
<option value="BeanieQuiz" id="quiz">Beanie Quiz</option>
<option value="Generator">Random Beanie Generator</option> <br>
</select>