En una de las páginas de mi sitio, el usuario tendrá la opción de seleccionar cuál quiere entre el concurso de gorros y el generador de gorros. No sé cómo crear javascript donde cuando el usuario selecciona cuál quiere, lo llevará a la página oculta donde está el cuestionario o el generador según la selección del usuario.
El siguiente código es lo que tengo en la página principal una vez que el usuario selecciona una opción. Quiero que lo dirija a una de mis páginas ocultas, ya sea la página "BeanieQuiz o BeanieGenerator según lo que elija. ¿Cómo crearé javascript para eso? gracias por tu ayuda de antemano
<!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>Para ocultar todos los elementos de una clase:
document.querySelector(".content1").style.display = "none"Para mostrar todos los elementos de una clase
document.querySelector(".content2").style.display = "block"(EDITAR) Por lo que entendí, ¿desea obtener la selección del usuario en su cuadro desplegable?
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() }Si quiso decir que desea mantener al usuario en la misma página HTML, pero solo desea cambiar la vista , puede hacer lo que Mint ha mencionado
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>