Javascript classlist object and query selector to toggle

Question

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. I have to use a function in Javascript that adds the classlist to the fieldset.

Right now, this is my code in 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:

<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:

.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. I can't use onclick, because my teacher don't want me to use that.

Answer 1

You have some problems in your code:

1. You fogot the start form tag.
2. project.classList.toggle(".project"); need to be 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. You want to show just one section on the same time. right?
3. You have multiple checkboxes so you need to attach click event to each of them.

 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>