How to hide and show a page after the submit button is clicked (HTML)-CodePudding

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 >
    <header >
      <img src="Images/bigger thing.png"  align="left">
    </header>
    <header >
      <h1>BEANIE GENIE</h1>
    </header>

    
    
    <nav >
      <div >
        <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 >
      <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 >
      <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 >
    <h1> Contact Us! </h1>
    <p> Business: Beanie Genie </p>
    <p> Phone Number: 470-309-8251 </p>
    <p> Email: [email protected] </p>
  </footer>
  </div>

CodePudding user response：

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()
}

CodePudding user response：

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  id="page-BeanieQuiz">
  <h1>Beanie Quiz Page</h1>
  <div>content goes here...</div>
</div>
<div  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>