Hulp bij javascript opdracht

[mrmajor]

Goedenavond, ik moet voor een opdracht op school een opdracht maken, ik mag ook pHp gebruiken, maar voor dit stukje code leek javascript mij meer geschikt. De bedoeling is als volgt:

Ik moet een invulveldje zichtbaar maken, als je op een checkbox bovenaan de pagina klikt. voor het invulveld heb ik de volgende html code:

<input name="invulveld" id="veld" type="hidden" size="30" tabindex="4">

hidden heb ik gekozen, omdat de optie niet ingevuld hoeft te worden, als de checkbox niet is aangeklikt, en hij moet dus onzichtbaar zijn (of oninvulbaar op een andere manier).

de checkbox wordt gegeven door de volgende html code, waarmee tegelijk de code wordt aangeroepen:

<input name="klik" id="cbox" type="checkbox" tabindex="2"onClick="javascript:verbergen);">

Het javascript dat ik heb ziet er als volgt uit:
[JS]function verbergen (){
box= document.getElementById(id);
if (box.checked==true) {
document.veld = "hidden";
} else {
document.veld = "text";
}
}[/JS]
helaas werkt dat niet. omdat ik er nauwelijks verstand van heb. Graag zou ik hulp krijgen over hoe ik dit wel voor elkaar krijg.

MVG

 

[Supersnail]

Het idee wat je hebt is goed, maar er staan een paar foutjes in de code:
[js]function verbergen (){
box= document.getElementById(id);[/js]
Hier gebruik je de variabele 'id' als argument voor getElementById. Deze variabele bestaat niet. Wat je hier moet gebruiken is het id van de checkbox (tussen aanhalingstekens).
[js]
if (box.checked==true) {
document.veld = "hidden";[/js]
Hier geef je het attribuut 'veld' van 'document' de waarde 'hidden'. Wat je hier eigenlijk wilt is de waarde van het attribuut 'type' van het invulveld veranderen. Dus met document.getElementById het invulveld opvragen en dan (op de manier van hierboven) de waarde van het attribuut 'type' veranderen.
[js] } else {
document.veld = "text";[/js]
Hier geldt hetzelfde als hierboven.
[js] }
}[/js]

Je moet trouwens ook nog even kijken naar 'hidden' en 'text'. Je probeert nu het veld te verbergen als de checkbox aangevinkt is en te tonen als die niet aangevinkt is, in plaats van andersom.

 

[mrmajor]

dank je, ik heb het aangepast, ik kan het helaas niet testen, want hij voert het programma niet uit als ik op de checkbox klik.Ik dacht dat er een fout in het programma zou zitten, dus ik heb het programma een alertbox gegeven, maar die verscheen niet.
wat ik dus nu op die checkbox heb gezet is het volgende:

<input name="cbox" id="cbox" type="checkbox" tabindex="2" onClick="javascript:verbergen">

Als volledig programma heb ik nu het volgende:
[JS] function verbergen(){
box= document.getElementById"cbox";
if (box.checked==true) {
document.getElementById"veld".type = "text";
} else {
document.getElementById"veld".type = "hidden";
}
}[/JS]
Het veld ziet er trouwens zo uit:

<input name="veldje" id="veld" size="30" tabindex="4">

Sorry dat ik zo faal in programmeren, het ligt me gewoon niet. Ik gebruik ook de handleiding op het internet, maar ik kan nooit vinden wat ik nodig heb. Er staat altijd altijd veel te veel informatie, waar ik niet uit kan filteren wat ik nodig heb.

 

[Supersnail]

Je moet wel haakjes gebruiken bij getElementById: document.getElementById('cbox') (zelfde voor 'veld'). Ook moet je nog haakjes zetten achter de aanroep van de functie 'verbergen': javascript:verbergen() (je mag 'javascript:' overigens weglaten).