Javascript, laat iets zien na klik op radio.. - Forum

Jesper Diovo

17-10-2009 16:25

Roep met het attribuut onclick een javascript functie aan die de innerHTML van de div o.i.d. waar de tekst in staat leeg haalt.

Geef eens een stukje relevante code.

Lars Groot

17-10-2009 16:36

@ Hierboven,
Kan je een voorbeeldje geven?
(Ik kan echt geen JS).
Verder, dit word het formulier:


Moet het een Radiobutton vraag worden?<br /><br />
<form method="post">
Ja: <input type="radio" name="vraag1" value="1"><br />
Nee: <input type="radio" name="vraag1" value="0"><br />
//ZOJA\\
Wat is het goede antwoord?: <input type="text" name="vraag1o1"><br />
Een ander antwoord: <input type="text" name="vraag1o2"><br />
Een ander antwoord: <input type="text" name="vraag1o3"><br />
Een ander antwoord: <input type="text" name="vraag1o4"><br />
//ZOJA\\
<input type="submit" name="submit" value="Verstuur"><br />
</form>

Oja, en hoe kan ik in het vraagformulier (andere pagina), een radiobutton en de waarde etc. schudden?, dus zegmaar dat als je de pagina oproept eerst de antwoorden zo staan:
1
2
3
4
En daarna:
3
2
4
1

Bedankt alvast, Lars

Jesper Diovo

17-10-2009 16:39

@de tweede vraag: ze op die pagina in een array stoppen en die array [php]shuffle[/php]n.

@de eerste vraag:
Wat wil je nu precies dat er gebeurt? Welke tekst moet verdwijnen en verschijnen?

Lars Groot

17-10-2009 16:43

Dit moet komen als je op de 1 klikt:
Wat is het goede antwoord?: <input type="text" name="vraag1o1"><br />
Een ander antwoord: <input type="text" name="vraag1o2"><br />
Een ander antwoord: <input type="text" name="vraag1o3"><br />
Een ander antwoord: <input type="text" name="vraag1o4"><br />
En anders niks, dus het moet gewoon mooi weggaan.

Lars Groot

17-10-2009 17:12

Goed, het is me gelukt...
Enkel nog 1 probleempje, het is een lap code, en de buttons komen niet onder elkaar.
Weet iemand hoe dit korter kan, of de buttons onder elkaar?

Heb dus nu dit:


<font face="arial">
<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>
<script language="JavaScript">
var ids2=new Array('a3','a4');
function switchid2(id){	
	hideallids2();
	showdiv2(id);
}

function hideallids2(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids2.length;i++){
		hidediv(ids2[i]);
	}		  
}

function hidediv2(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv2(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>
<script language="JavaScript">
var ids3=new Array('a5','a6');
function switchid3(id){	
	hideallids3();
	showdiv3(id);
}

function hideallids3(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids3.length;i++){
		hidediv(ids3[i]);
	}		  
}

function hidediv3(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv3(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>
<script language="JavaScript">
var ids4=new Array('a7','a8');
function switchid4(id){	
	hideallids4();
	showdiv4(id);
}

function hideallids4(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids4.length;i++){
		hidediv(ids4[i]);
	}		  
}

function hidediv4(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM4 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv4(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM4 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>
<script language="JavaScript">
var ids5=new Array('a9','a10');
function switchid5(id){	
	hideallids5();
	showdiv5(id);
}

function hideallids5(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids5.length;i++){
		hidediv(ids5[i]);
	}		  
}

function hidediv5(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM5 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 5
			document.id.display = 'none';
		}
		else { // IE 5
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv5(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM5 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 5
			document.id.display = 'block';
		}
		else { // IE 5
			document.all.id.style.display = 'block';
		}
	}
}
</script>
<b>Vraag 1:</b><br /><br />
<input type="text" name="vraag1"><br />
Word dit een multiplechoice vraag?<br />
<form method="post">
Ja: <input type="radio" name="vraag1" value="1" onClick="javascript:switchid('a1');" checked><br />
Nee: <input type="radio" name="vraag1" value="0" onClick="javascript:switchid('a2');"><br /><br />
	<div id='a1' style="display:block;">
<b>Opties van vraag 1:</b><br />
Goed antwoord: <input type="text" name="vraag1a1"><br />
Fout antwoord: <input type="text" name="vraag1a2"><br />
Fout antwoord: <input type="text" name="vraag1a3"><br />
Fout antwoord: <input type="text" name="vraag1a4"><br /><br />
	</div>
	<div id='a2' style="display:none;">
<b>Optie van vraag 1:</b><br />
Goed antwoord: <input type="text" name="vraag1a"><br /><br />
	</div>
<b>Vraag 2:</b><br /><br />
<input type="text" name="vraag2"><br />
Word dit een multiplechoice vraag?<br />
<form method="post">
Ja: <input type="radio" name="vraag2" value="1" onClick="javascript:switchid2('a3');" checked><br />
Nee: <input type="radio" name="vraag2" value="0" onClick="javascript:switchid2('a4');"><br /><br />
	<div id='a3' style="display:block;">
<b>Opties van vraag 2:</b><br />
Goed antwoord: <input type="text" name="vraag2a1"><br />
Fout antwoord: <input type="text" name="vraag2a2"><br />
Fout antwoord: <input type="text" name="vraag2a3"><br />
Fout antwoord: <input type="text" name="vraag2a4"><br /><br />
	</div>
	<div id='a4' style="display:none;">
<b>Optie van vraag 2:</b><br />
Goed antwoord: <input type="text" name="vraag2a"><br /><br />
	</div>
<b>Vraag 3:</b><br /><br />
<input type="text" name="vraag3"><br />
Word dit een multiplechoice vraag?<br />
<form method="post">
Ja: <input type="radio" name="vraag3" value="1" onClick="javascript:switchid3('a5');" checked><br />
Nee: <input type="radio" name="vraag3" value="0" onClick="javascript:switchid3('a6');"><br /><br />
	<div id='a5' style="display:block;">
<b>Opties van vraag 3:</b><br />
Goed antwoord: <input type="text" name="vraag3a1"><br />
Fout antwoord: <input type="text" name="vraag3a2"><br />
Fout antwoord: <input type="text" name="vraag3a3"><br />
Fout antwoord: <input type="text" name="vraag3a4"><br /><br />
	</div>
	<div id='a6' style="display:none;">
<b>Optie van vraag 3:</b><br />
Goed antwoord: <input type="text" name="vraag3a"><br /><br />
	</div>
<b>Vraag 4:</b><br /><br />
<input type="text" name="vraag4"><br />
Word dit een multiplechoice vraag?<br />
<form method="post">
Ja: <input type="radio" name="vraag4" value="1" onClick="javascript:switchid4('a5');" checked><br />
Nee: <input type="radio" name="vraag4" value="0" onClick="javascript:switchid4('a6');"><br /><br />
	<div id='a5' style="display:block;">
<b>Opties van vraag 4:</b><br />
Goed antwoord: <input type="text" name="vraag4a1"><br />
Fout antwoord: <input type="text" name="vraag4a2"><br />
Fout antwoord: <input type="text" name="vraag4a4"><br />
Fout antwoord: <input type="text" name="vraag4a4"><br /><br />
	</div>
	<div id='a6' style="display:none;">
<b>Optie van vraag 4:</b><br />
Goed antwoord: <input type="text" name="vraag4a"><br /><br />
	</div>
<b>Vraag 5:</b><br /><br />
<input type="text" name="vraag5"><br />
Word dit een multiplechoice vraag?<br />
<form method="post">
Ja: <input type="radio" name="vraag5" value="1" onClick="javascript:switchid5('a5');" checked><br />
Nee: <input type="radio" name="vraag5" value="0" onClick="javascript:switchid5('a6');"><br /><br />
	<div id='a5' style="display:block;">
<b>Opties van vraag 5:</b><br />
Goed antwoord: <input type="text" name="vraag5a1"><br />
Fout antwoord: <input type="text" name="vraag5a2"><br />
Fout antwoord: <input type="text" name="vraag5a5"><br />
Fout antwoord: <input type="text" name="vraag5a5"><br /><br />
	</div>
	<div id='a6' style="display:none;">
<b>Optie van vraag 5:</b><br />
Goed antwoord: <input type="text" name="vraag5a"><br /><br />
	</div>
<input type="submit" name="submit" value="Verstuur!">
</form>

Jesper Diovo

17-10-2009 17:24

Waarom definieer je dezelfde functies 5x alleen dan telkens met een andere naam? Blijkbaar weet je niet hoe je functies moet gebruiken...

Lars Groot

17-10-2009 17:33

Nee, ik kan geen JS, daarom :):)

Jesper Diovo

17-10-2009 17:44

Functies werken exact hetzelfde als in PHP. Het enige wat je hoeft te doen is de functies één keer definiëren en die naam telkens oproepen.

naam(id)

Naam is dus switchid, hideallids, hidediv en showdiv.
Id vervang je voor het ID van de betreffende div waar iets mee gedaan moet worden: a1, a2, a3, a4, a5 of a6.

Voorbeeld van hoe een functie er dus uit kan zien:
hidediv('a1')
of
hidediv('a6')

en ga zo maar door.