【发布时间】：2022-01-20 09:42:55
【问题描述】：
刚刚在我正在制作的网页上遇到问题。另外，对于 JS 来说还是新手。
我用 display:none; 隐藏了两个 div并编写了一些 JS 来根据值更改一个或其他 div。
我已经设法让它工作，但是当我选择非参与值时，没有显示完整的 div。它仅在应该有两个时显示在文本输入上。我正在努力寻找我出错的地方。
这里是html：
<!DOCTYPE HTML>
<script src="https://kit.fontawesome.com/299fe5d3f3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/form.css" />
<html>
<head>
<title>Bahloo Country</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Navbar -->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">About</a>
<a href="#contact">Services</a>
<a href="#about">Contact</a>
<a href="#about">Apply</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Header -->
<section id="header" class="dark">
<header>
<div class="hedo"><h1>Participant Application Form</h1>
<p>Become a Participant of Bahloo Country's services!</p><br>
<p>Bahloo would like to acknowledge the traditional custodians of the land in which we work, live and learn, the land of the Bundjalung Nation. We pay our respects to elders of the past, present and future emerging</p><br>
<p>May we all work together, within the best of our ability, to preserve the knowledge of our lore, land and culture to preserve for the future generations, and continue to build the strength of our community.</p>
</div></header>
</section>
</div>
<section id="first" class="main">
<form action="" method="get">
<div class="rendered-form">
<div id="detailsSec">
<label for="iddecade" class="formbuilder-select-label">Are you the participant or applying on behalf of someone?<span class="formbuilder-required">*</span></label>
<select class="decade" name="iddecade" id="idParticipant" onchange = "formStarter()" required="required" aria-required="true">
<option disabled selected value> -- select an option -- </option>
<option value="participant" id="idpartici-0">I am the participant</option>
<option value="not-participant" id="idpartici-1">I am applying on behalf of someone</option>
</select>
<!-- If person completing form = participant-->
<div id="partici" style="display:none;">
<label for="undefined" class="formbuilder-text-label">Name of Person Completing Form<span class="required">*</span></label>
<input type="text" class="fullname" access="false" id="control-2763896" title="Enter your full name" required="required" aria-required="true" name="undefined">
</div>
<!-- If Person completing form = not-participant -->
<div id="not-partici" style="display:none;">
<label for="undefined" class="formbuilder-text-label">Name of Person Completing Form<span class="required">*</span></label>
<input type="text" class="fullname" access="false" id="control-2763896" title="Enter your full name" required="required" aria-required="true" name="undefined">
<label for="undefined" class="formbuilder-text-label">Participant's full name<span class="required">*</span></label>
<input type="text" class="fullname" access="false" id="control-2763896" title="Enter your full name" required="required" aria-required="true" name="undefined">
</div>
<p>placeholder</p>
</div>
</div>
</form>
</section>
这是 CSS：
@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic");
@import url('https://fonts.googleapis.com/css2?family=Knewave&display=swap');
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
text-align: center;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
transition: 1s;
}
.topnav a:hover {
background-color: rgb(223, 122, 8);
color: black;
padding: 16px 30px;
transition: 1s;
}
.topnav .icon {
display: none;
}
body {
line-height: 1;
}
h1 {
font-family: 'Knewave';
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Basic */
@-ms-viewport {
width: device-width;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #F8F8F8;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 17pt;
line-height: 1.75em;
color: #888;
}
.dark {
color: #aaa;
color: rgba(255, 255, 255, 0.65);
}
input, textarea, select {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 17pt;
line-height: 1.75em;
color: #888;
}
h1, h2, h3, h4, h5, h6 {
color: #666;
margin: 0 0 1em 0;
font-weight: 100;
line-height: 1.5em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
color: #fff;
}
strong, b {
font-weight: 400;
color: inherit;
}
.dark strong, .dark b {
color: #fff;
color: rgba(255, 255, 255, 0.85);
}
em, i {
font-style: italic;
}
a {
-moz-transition: border-bottom-color 0.25s ease-in-out;
-webkit-transition: border-bottom-color 0.25s ease-in-out;
-ms-transition: border-bottom-color 0.25s ease-in-out;
transition: border-bottom-color 0.25s ease-in-out;
color: inherit;
border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
}
a:hover {
border-bottom-color: rgba(0, 0, 0, 0);
}
.dark a {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.dark a:hover {
border-bottom-color: rgba(255, 255, 255, 0);
}
sub {
top: 0.5em;
font-size: 0.8em;
}
sup {
top: -0.5em;
font-size: 0.8em;
}
hr {
border: 0;
border-top: solid 1px #e6e6e6;
margin: 2em 0 2em 0;
}
.dark hr {
border-top-color: rgba(255, 255, 255, 0.5);
}
blockquote {
border-left: solid 0.25em #e6e6e6;
padding: 1em 0 1em 2em;
font-style: italic;
}
.dark blockquote {
border-left-color: rgba(255, 255, 255, 0.5);
}
p, ul, ol, dl, table {
margin-bottom: 1em;
}
p {
text-align: justify;
}
header {
margin-bottom: 1em;
}
header h1, header h2, header h3, header h4, header h5, header h6 {
margin: 0;
}
header p {
display: block;
margin: 0;
padding: 0.25em 0 0.5em 0;
}
footer {
padding-top: 1.5em;
}
/* Container */
.container {
margin: 0 auto;
max-width: 100%;
width: 1360px;
}
.container.medium {
width: 1020px;
}
@media screen and (max-width: 1680px) {
.container {
width: 1200px;
}
.container.medium {
width: 900px;
}
}
@media screen and (max-width: 1280px) {
.container {
width: 960px;
}
.container.medium {
width: 720px;
}
}
@media screen and (max-width: 1000px) {
.container {
width: 100% !important;
}
}
/* Row */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Image */
.image {
display: inline-block;
border: 0;
}
.image:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("images/overlay.png");
}
.image img {
display: block;
width: 100%;
border-radius: 0.5em;
}
.image.featured {
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.fit {
display: block;
width: 100%;
}
.image.left {
float: left;
margin: 0 2em 2em 0;
}
.image.centered {
display: block;
margin: 0 0 2em 0;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
/* Header */
.hedo {
border: solid;
border-color: rgba(0, 0, 0, 0.25);
background-color:rgba(0, 0, 0, 0.4);
max-width: 1200px;
margin: 0 auto;
}
#header {
margin: 0;
background-image: url("images/overlay.png"), url("../../images/header.jpg");
background-size: auto, cover;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
padding: 14em 0 14em 0;
text-align: center;
color: #fff;
}
#header header h1 {
font-size: 2.25em;
line-height: 1.25em;
margin-bottom: 0;
}
#header header p {
margin-top: 1.25em;
font-weight: 100;
padding: 0;
font-size: 1.25em;
line-height: 1.5em;
text-align: center;
}
#header footer {
padding-top: 1.5em;
}
/* Main Sections */
.main {
margin: 0;
}
.main > header {
background: #fff;
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
}
.main > header h2 {
font-size: 2.25em;
font-weight: 100;
margin-bottom: 0;
}
.main > header p {
margin: 2em 0 0 0;
padding: 0;
text-align: center;
}
#first {
width: 50%;
margin: auto;
}
div > #skillsetssec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
#skillsetssec > label:not(.formbuilder-checkbox-group-label) {
padding: 25px 0px;
}
div > #detailsSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
div > #expSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
div > #workPrefSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
#daysAvbl {
border-top: solid;
border-bottom: solid;
margin-top: 10px 0px;
}
div > #vehDetailsSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
div > #formsSec {
border: solid;
border-radius: 5px;
padding: 15px;
margin: 30px 0px;
}
input[type="file"] {
margin-bottom: 45px;
margin-top: 20px;
padding-bottom: 30px;
padding-top: 20px;
border-bottom: solid;
border-right: solid;
border-top: solid;
border-radius: 5px;
width: 100%;
}
.btn {
text-align: center;
}
button[type="submit"] {
margin-bottom: 50px;
padding: 40px 100px;
font-size: 30px;
}
/* Footer */
#footer {
margin: 0;
text-align: center;
padding: 4em 0 8em 0;
box-shadow: inset 0 1px 0 0 #e6e6e6;
}
#footer .copyright {
margin-top: 3em;
font-size: 0.8em;
color: #aaa;
}
#footer .copyright a {
color: inherit;
}
#footer ul.icons a {
box-shadow: inset 0 0 0 1px #d6d6d6;
}
/* Wide */
@media screen and (max-width: 1680px) {
/* Basic */
body, input, textarea, select {
font-size: 15pt;
line-height: 1.75em;
}
}
/* Normal */
@media screen and (max-width: 1280px) {
/* Basic */
body, input, textarea, select {
font-size: 13pt;
line-height: 1.65em;
}
/* Feature Icon */
.feature-icon {
margin-bottom: 2em;
}
/* Header */
#header {
padding: 12em 0 12em 0;
}
/* Main Sections */
.main > header {
padding: 4em 0 4em 0;
}
.main > .content {
padding: 4em 0 4em 0;
}
}
/* Narrow */
@media screen and (max-width: 1000px) {
/* Basic */
header, footer, h2, h3, h4, h5, h6, header > p {
text-align: center;
}
/* Sections/Article */
section, article {
margin: 0 0 2.5em 0 !important;
}
.row > section, .row > article {
margin: 0 0 2.5em 0 !important;
}
/* Table */
.table-wrapper {
width: 100%;
overflow-x: scroll;
padding-left: 1px;
-webkit-overflow-scrolling: touch;
}
/* Header */
#header {
margin: 0 !important;
padding: 8em 2em 8em 2em;
}
#header header p {
margin-top: 1em;
}
#header footer {
padding-top: 1.25em;
}
/* Main Sections */
.main {
margin: 0 !important;
}
.main > header {
padding: 3.5em 2em 3.5em 2em;
}
.main > header h2 {
font-size: 1.85em;
}
.main > header br {
display: none;
}
.main > header p {
margin: 1.5em 0 0 0;
}
.main > .content {
padding: 3.5em 20px 3.5em 20px;
}
.main > .content > .container > :last-child {
margin-bottom: 0 !important;
}
/* Footer */
#footer {
margin: 0 !important;
padding: 3em 0 3em 0;
}
#footer .copyright {
margin-top: 2em;
}
}
.coreSupImg {
border-radius: 50%;
width: 50%;
}
#testies {
border-radius: 50%;
max-width: 200px;
max-height: 200px;
}
/* Mobile */
@media screen and (max-width: 736px) {
/* Basic */
body, input, textarea, select {
font-size: 11pt;
}
/* Sections/Article */
section, article {
margin: 0 0 1.5em 0 !important;
}
.row > section, .row > article {
margin: 0 0 1.5em 0 !important;
}
/* Button */
.button {
padding-left: 0;
padding-right: 0;
width: 100%;
max-width: 24em;
}
/* Icons */
ul.icons li {
padding-left: 0.35em;
}
/* Menu */
ul.menu li {
border: 0;
padding: 0;
display: block;
margin: 1em 0 1em 0;
}
/* Header */
#header {
padding: 6em 20px 6em 20px;
}
#header > header {
padding: 0 1em 0 1em;
}
/* Main Sections */
.main > header {
padding: 3em 20px 3em 20px;
}
.main > header h2 {
font-size: 1.5em;
}
.main > .content {
padding: 3em 20px 3em 20px;
}
.main > .content h3 {
font-size: 1.25em;
}
}
这里是 JS：
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
wide: [ '1281px', '1680px' ],
normal: [ '1001px', '1280px' ],
narrow: [ '737px', '1000px' ],
mobile: [ null, '736px' ]
});
// Scrolly.
$('.scrolly').scrolly();
})(jQuery);
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function formStarter() {
var a = document.getElementById("idParticipant");
var partici = document.getElementById("partici")
var notPartici = document.getElementById("not-partici")
if (a.value == 'participant'){
partici.style.display = "block";
} else {
notPartici.style.display = "block";
}
}
注意：我正在编辑模板，因此很可能有大量未使用的代码完全一团糟......
【问题讨论】：
-
您有多个元素具有相同的
id属性，页面的id 是唯一的。如果您使用getElementById()，则只会选择一个元素。 -
我看不到我在哪里加倍了 id 标签？有没有一种快速的方法可以在 vs 代码上搜索？
标签： javascript show-hide