单击提交按钮后如何隐藏和显示页面 (HTML)
[英]How to hide and show a page after the submit button is clicked (HTML)
问题描述
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.
在我网站的其中一个页面上，用户可以选择 select 在豆豆测验和豆豆生成器之间他们想要哪一个。 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.我不知道如何创建 javascript，当用户选择他们想要的那个时，它会将他们带到隐藏页面，在那里它是基于用户选择的测验或生成器。
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下面的代码是我在主页上拥有的代码，一旦用户选择了一个选项，我希望它根据他们的选择将他们引导到我的隐藏页面之一“BeanieQuiz 或 BeanieGenerator 页面。我将如何为其创建 javascript？提前感谢您的帮助
<!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>
2 个解决方案
解决方案1
1 2022-04-30 21:27:54
To hide all elements in a class:隐藏 class 中的所有元素：
document.querySelector(".content1").style.display = "none"
To show all elements in a class显示 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()
}
解决方案2
0 已采纳 2022-04-30 22:00:26
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如果你的意思是你想让用户保持在同一个 HTML 页面上，但你只想切换视图，你可以做 Mint 提到的
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.