用单选按钮显示不同的形式

Question

在我的HTML中，我有4个字段集。 在第二个字段集中有2个单选按钮。第一个需要显示thirth fieldset，第二个需要显示第4个fieldset。

现在问题是第二个单选按钮完成了它的工作。它显示正确的字段集，并在选择第一个单选按钮时隐藏。但是第一个单选按钮不再做任何事了。 它不会显示出thirth fieldset。这是因为我为fieldset2 var添加了classList.remove。 我不知道为什么这行代码永久隐藏了thirth字段集。

我刚发现第一个var完全被拒绝了。只会执行最后一个var。 即使我把它们放在不同的文件或不同的函数中，即使我在css中为它们创建不同的类，var也会覆盖第一个...

function form


			<form>
				<fieldset>
					<legend>Contactgegevens</legend>
					<label for="naam">Naam</label>
					<input type="text" id="naam" required/>	
					
					<label for="bedrijf">Naam bedrijf</label>
					<input type="email" id="bedrijf" required/>

					<label for="adres">Adres</label>
					<input type="text" id="adres" required/>
					
					<label for="postcode">Postcode</label>
					<input type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" id="postcode" placeholder="1234AB" required/>
					
					<label for="plaats">Plaatsnaam</label>
					<input type="number" id="plaats" required/>
					
					<label for="telefoon">Telefoon</label>
					<input type="tel" id="telefoon" />

					<label for="land">E-mail</label>
					<input type="text" id="land" placeholder="voorbeeld@email.com" required/>
				</fieldset>
				
				<fieldset>
					<legend>Ik wil mij aanmelden voor:</legend>
					<label for="project">Een project</label>
					<input type="radio" name="aanmelden" id="project"/>
					
					<label for="stage">Een stage</label>
					<input type="radio" name="aanmelden" id="stage"/>
				</fieldset>
				
				<fieldset>
					<legend>Project</legend>
					
					<label for="titel">Titel project</label>
					<input type="text" id="titel" />
					
					<label for="omschrijving">Opdrachtomschrijving</label>
					<textarea id="omschrijving" rows="6" cols="25"></textarea>
					
					<label for="doelgroep">Doelgroepomschrijving</label>
					<textarea id="doelgroep" rows="6" cols="25"></textarea>
					
					<label for="intentie">Intentie van het project</label>
					<textarea id="intentie" rows="6" cols="25"></textarea>
					
					<label for="looptijd">Looptijd</label>
					<input type="text" id="looptijd" placeholder="Bijv: 10 weken"/>
					
					<label for="deadline">Deadline</label>
					<input type="text" id="deadline" placeholder="dd-mm-jjjj"/>
					
					<label for="geschikt">Geschikt voor</label>
					<select id="geschikt">
						<option>Eerstejaar studenten</option>
						<option>Tweedejaars studenten</option>
						<option>Derdejaars studenten</option>
						<option>Afstudeer studenten</option>
						<option>Onbekend</option>
					</select>
				</fieldset>
				
				<fieldset>
					<legend>Stage</legend>
					
					<label for="geschikt2">Geschikt voor</label>
					<select id="geschikt2">
						<option>Tweedejaars studenten</option>
						<option>Afstudeer studenten</option>
						<option>Onbekend</option>
					</select>
					
					<label for="hoelang">Hoelang is de stage?</label>
					<select id="hoelang">
						<option>10 weken</option>
						<option>20 weken</option>
					</select>
					
					<label for="begindatum">Begindatum</label>
					<input type="text" id="begindatum" placeholder="dd-mm-jjjj"/>

					<label for="werkzaamheden">Omschrijving stagewerkzaamheden</label>
					<textarea id="werkzaamheden" rows="6" cols="25"></textarea>				
				</fieldset>
			</form>


Keuze(){
    


console.log("hoi")
	
	    var fieldset = document.querySelector('fieldset:nth-of-type(3)');
	
	    fieldset.classList.add('hidefield');
	
	document.querySelector('input[type="radio"]:first-of-type').onclick = function() {
		fieldset.classList.add('showfield');
	}
	
	document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
		fieldset.classList.remove('showfield');
	}
	
	var fieldset2 = document.querySelector('fieldset:nth-of-type(4)');
	
	fieldset2.classList.add('hidefield');
	
	document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
		fieldset2.classList.add('showfield');
	}
	
	    document.querySelector('input[type="radio"]:first-of-type').onclick = function() {
		    fieldset2.classList.remove('showfield');
	    }
    }
    window.onload=formKeuze;