[英]Javascript classlist object and query selector to toggle
Can someone help me, because I'm stuck right now. 有人可以帮我,因为我现在被困住了。 I have to make a form toggle betweeen two fieldsets using classlist object and queryselector.
我必须使用classlist对象和queryselector在两个字段集之间进行表单切换。 I have to use a function in Javascript that adds the classlist to the fieldset.
我必须使用Javascript中的一个将类列表添加到字段集的函数。
Right now, this is my code in javascript: 现在,这是我在javascript中的代码:
var click = document.querySelector('form>fieldset>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
click.addEventListener("click", function() {
if (click === "stage") {
project.classList.toggle(".project");
}
else {
stage.classList.toggle(".stage");
}
});
This is my code in HTML: 这是我的HTML代码:
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
And this is my code in CSS: 这是我在CSS中的代码:
.project {
display: none;
}
.stage {
display: none;
}
The fieldsets called "Project" and "Stage" have to toggle. 必须切换名为“项目”和“阶段”的字段集。 So, when I click on the radio button called project, the stage form has to disappear, vice versa.
因此,当我单击名为project的单选按钮时,舞台形式必须消失,反之亦然。 I can't use onclick, because my teacher don't want me to use that.
我不能使用onclick,因为我的老师不希望我使用onclick。
You have some problems in your code: 您的代码中有一些问题:
form
tag. form
标签。 project.classList.toggle(".project");
need to be project.classList.toggle("project");
project.classList.toggle("project");
2.1 You can't use toggle classes in this case, because you don't want to toggle, you want to add and remove. click
event to each of them. click
event附加到每个复选框。 var click = document.querySelectorAll('form fieldset:first-child>label>input[type="radio"]'); var project = document.querySelector(".project"); var stage = document.querySelector(".stage"); for (var cl = 0; cl < click.length; cl++) { click[cl].addEventListener("change", function() { //if (this.value === "stage") { project.classList.toggle("show"); project.classList.toggle("hide"); stage.classList.toggle("show"); stage.classList.toggle("hide"); //stage.classList.remove("hide"); //} //else { // project.classList.remove("hide"); // stage.classList.add("hide"); //} }); }
.hide { display:none; }
<form> <fieldset> <legend>Ik wil mij aanmelden:</legend> <label> <input type="radio" name="submit-for" value="project" checked="checked"> <span>Voor een project</span> </label> <label> <input type="radio" name="submit-for" value="stage"> <span>Als stagebedrijf</span> </label> </fieldset> <fieldset id="project" class="project hide"> <legend>Project</legend> <label> <span>Titel:</span> <input type="text" name="project-title"> </label> <label> <span>Opdrachtomschrijving:</span> <textarea name="project-description"></textarea> </label> <label> <span>Doelgroepomschrijving:</span> <textarea name="project-target-audience"></textarea> </label> <label> <span>Doelstelling/intentie van het project:</span> <textarea name="project-goal"></textarea> </label> <label> <span>Looptijd:</span> <input type="text" name="project-duration"> </label> <label> <span>Deadline:</span> <input type="date" name="project-deadline"> </label> <fieldset> <legend>Geschikt voor</legend> <label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label> <label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label> <label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label> <label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label> <label><input type="checkbox" name="project-onbekend"> Onbekend</label> </fieldset> <label> <span>Opmerking:</span> <textarea name="project-comments"></textarea> </label> </fieldset> <fieldset id="stage" class="stage"> <legend>Stage</legend> <fieldset> <legend>Geschikt voor</legend> <label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label> <label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label> <label><input type="checkbox" name="stage-onbekend"> Onbekend</label> </fieldset> <fieldset> <legend>Hoe lang is de stage</legend> <label><input type="radio" name="stage-duration" value="10"> 10 weken</label> <label><input type="radio" name="stage-duration" value="20"> 20 weken</label> </fieldset> <label> <span>Begindatum:</span> <input type="date" name="stage-startdate"> </label> <label> <span>Beschrijving stagewerkzaamheden</span> <textarea name="stage-description"></textarea> </label> <fieldset> <legend>Beschrijving stagebedrijf</legend> <label> <span>Bedrijfsnaam:</span> <input type="text" name="stage-company-name"> </label> <label> <span>Adres:</span> <input type="text" name="stage-address"> </label> <label> <span>Postcode:</span> <input type="text" name="stage-postal"> </label> <label> <span>Plaats:</span> <input type="text" name="stage-place"> </label> <label> <span>Sector:</span> <input type="text" name="stage-sector"> </label> <label> <span>Core business:</span> <input type="text" name="stage-core-business"> </label> </fieldset> <label> <span>Opmerking:</span> <textarea name="stage-comments"></textarea> </label> </fieldset> <input type="submit" value="Aanmelden"> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.