Sharif1111
Sharif1111

Reputation: 3407

Javascript toggle doesnt work properly

i have coded some javascript to toggle an option for fieldset "ik wil mijn aanmelden" with fieldset "project" as a choice with first radiobutton, and fieldset "stage" for the second radiobutton. When i run it in the browser it will show "project"(first radiobutton) but not "stage" as i click the second radiobutton. What am doing wrong? Thanks in advance.

//windows onload zodat je eerst je html inlaadt
window.onload = function() {
	'use strict';

	var projecttoggle, stagetoggle;
//queryselector returns eerste element van het document met specifieke selector
	projecttoggle = document.querySelector('fieldset:nth-of-type(3)');
	stagetoggle = document.querySelector('fieldset:nth-of-type(4)');
//classList returns a token list of the class attribute of the element
//queryselector returns eerste element van het document met specifieke selector
	//verstoppen  ---- met toggle voor visibility van het element
	projecttoggle.classList.add('projecttoggleuit');
	stagetoggle.classList.add('stagetoggleuit');


//eerste radio button krijg je onclick eerste element 
	document.querySelector('input[type="radio"]').onclick = function(){
		projecttoggle.classList.add('projecttoggleaan');
		stagetoggle.classList.remove('stagetoggleaan');


	};

//last of type van radio button aanklikken voor tweede gekozen element
	document.querySelector('input[type="radio"]:last-of-type').onclick = function(){
		projecttoggle.classList.remove('projecttoggleaan');
		stagetoggle.classList.add('stagetoggleaan');
	

	};





};
<form>
          <fieldset>
            <legend>Contactgevens</legend>

            <label for="naam">naam</label>
            <input type="text" id="naam" required placeholder="naam">
        <!--input type text is wat je moet invullen, email tel herkent de browser, vastgestelde input types in html5-->
            <label for="bedrijf">bedrijf</label>
            <input type="text" id="bedrijf">

            <label for="street">straatnaam</label>
            <input type="text" id="street">

            <label for="number">huisnummer</label>
            <input type="text" id="number">

            <label for="zip">postcode</label>
            <input type="text" id="zip" required placeholder="1234AB">

            <label for="stad">stad</label>
            <input type="text" id="stad">

            <label for="tel">telefoonnummer</label>
            <input type="tel" id="tel" required placeholder="1234123456">

            <label for="email">email</label>
            <input type="email" id="email" required>

          </fieldset>


          <fieldset>
            <legend>Ik wil mijn aanmelden:</legend>

            <input type="radio" name="waarom" value="waarom" class="project">voor een project <br>
            <input type="radio" name="waarom" value="waarom" class="stagebedrijf">als stagebedrijf

          </fieldset>


          <fieldset>
            <legend>Project</legend>

            <label for="Titel">titel</label>
            <input type="text" id="Titel" required>

            <label for="Opdrachtomschrijving">opdrachtomschrijving</label>
            <input type="text" id="Opdrachtomschrijving" required>

            <label for="Doelgroepomschrijving">doelgroepomschrijving</label>
            <input type="text" id="Doelgroepomschrijving" required>

            <label for="Doelstellingenintentievanhetproject">Doelstellingenintentievanhetproject</label>
            <input type="text" id="Doelstellingenintentievanhetproject" required>

            <label for="Looptijd">Looptijd</label>
            <input type="text" id="Looptijd">

            <label for="Deadline">Deadline</label>
            <input type="datetime-local" id="Deadline" required>

          </fieldset>

          <fieldset>
            <legend>Stage</legend>

            <label for="Geschiktvoor">geschiktvoor</label>
            <select id="Geschiktvoor">
              <option>tweedejaars studenten</option>
              <option>afstudeer studenten</option>
              <option>onbekend studenten</option>   
            </select>
              
          </fieldset>

          <fieldset>
            <legend>Geschikt voor</legend>

            <label for="kiesjaar">jaar student</label>
            <select id="kiesjaar">
              <option>eerstejaars studenten</option>
              <option>tweedejaars studenten</option>
              <option>derdejaars studenten</option>
              <option>afstudeer studenten</option>
              <option>onbekend</option>
            </select> 

            <label for="opmerkingen">opmerkingen</label>
            <input type="text" id="opmerkingen">
            
          </fieldset>

          <fieldset>
            <legend>Hoe lang is de stage?</legend>

            <label for="aantalweken">aantalweken</label>
            <select id="aantalweken">
              <option>10 weken</option>
              <option>10 weken</option>
            </select>

            <label for="beschrijvingstagewerkzaamheden"> beschrijving stagewerkzaamheden</label>
            <input type="text" id="beschrijvingstagewerkzaamheden">

          </fieldset> 

          <fieldset>
            <legend>Beschrijving stagebedrijf</legend>

            <label for="bedrijfsnaam">bedrijfsnaam</label>
            <input type="text" id="bedrijfsnaam" required>

            <label for="straatnaam">straatnaam</label>
            <input type="text" id="straatnaam">

            <label for="huisnummer">huisnummer</label>
            <input type="text" id="huisnummer">   

            <label for="postcodebedrijf">postcode</label>
            <input type="text" id="postcodebedrijf" required placeholder="1234AB">    

            <label for="plaats">plaats</label>
            <input type="text" id="plaats">   

            <label for="sector">sector</label>
            <input type="text" id="sector" required>

            <label for="corebusiness">core business</label>
            <input type="text" id="corebusiness" required>  

            <label for="opmerking">opmerking</label>
            <input type="text" id="opmerking">  

          </fieldset>

          <input type="submit">


        </form>

Upvotes: 2

Views: 106

Answers (1)

dfsq
dfsq

Reputation: 193261

Two different classes to show/hide is confusing. I would use just one class like show:

.show {
    display: block;
}

and then toggle it this way:

//eerste radio button krijg je onclick eerste element 
document.querySelector('input[type="radio"]').onclick = function () {
    projecttoggle.classList.add('show');
    stagetoggle.classList.remove('show');
};

//last of type van radio button aanklikken voor tweede gekozen element
document.querySelector('input[type="radio"]:last-of-type').onclick = function () {
    projecttoggle.classList.remove('show');
    stagetoggle.classList.add('show');
};

Demo: http://jsfiddle.net/LuyLy7ww/1/

Upvotes: 1

Related Questions