Переключатель Javascript не работает должным образом
Я кодировал некоторый JavaScript, чтобы переключать опцию для набора полей "ik wil mijn aanmelden" с набором полей "проект" в качестве выбора с первой радиопереключателем, и "сценой" набора полей для второй радиопереключателя. Когда я запускаю его в браузере, он показывает "проект" (первая кнопка), но не "сцена", когда я нажимаю вторую кнопку. Что я делаю не так? Заранее спасибо.
//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>1 ответ
Два разных класса, чтобы показать / скрыть, сбивает с толку. Я бы использовал только один класс, как show:
.show {
display: block;
}
и затем переключите это так:
//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');
};