Buttontekst aanpassen
Hieronder staat een button. Als je er op klikt verandert de tekst. Op deze bladzijde wordt beschreven hoe je dit kunt aanpakken.
Je kunt dit gebruiken om van een button een aan-uit schakelaar te maken, zie verder op deze bladzijde. Het is ook toegepast bij de voorbeelden van de voortgangsindicatoren (zie in de rubriek "Rekenen", elders op deze site).
De code van de voorbeelden staat onderaan deze bladzijde. Je kunt die downloaden om zelf te gebruiken.
- De code bestaat uit de JavaScript function Geklikt() die in de HEAD staat, en een <button>-tag in de BODY, op de plaats waar je hem nodig hebt.
- Alle code moet je aanpassen als je het zelf wilt gebruiken:
- De function Geklikt() moet je helemaal aan je eigen wensen aanpassen. Verwijder de regels:
var AantalGeklikt = 0;
en:
AantalGeklikt++;
Verander het deel rechts van het =-teken voor je eigen doeleinden.
Voeg eventueel zelf nog code toe om andere dingen te regelen. - Verander tekst die de button heeft als deze nog niet is aangeklikt (hier is dat: <b>Er is nog niet op deze knop geklikt</b>; let op de <b>-tag!).
- De function Geklikt() moet je helemaal aan je eigen wensen aanpassen. Verwijder de regels:
- Onderaan deze bladzijde staat een uitgewerkte code voor een AAN-UIT schakelaar.
- Op deze bladzijde wordt een <button>-tag gebruikt. Deze heeft het voordeel dat die niet
binnen een <form>-tag hoeft te staan en dus willekeurig op een bladzijde kan worden neergezet.
Het type moet button zijn. De button heeft id="Knop". Deze wordt gebruikt door
het JavaScript dat die de buttontekst verandert en is dus noodzakelijk.
Je reageert op een muisklik met de event-handler onclick. - De event-handler onclick start de function Geklikt(). Deze verandert de tekst van de button.
- De function Geklikt() kan ook werken met een <INPUT type="button"> binnen een
<form>-tag. Verander dan:
document.getElementById('Knop').innerHTML = "......"
Ook hier gebruik je de event-handler onclick om op een muisklik te reageren.
in
document.getElementById('Knop').value = "......"
De id="Knop" is ook hier noodzakelijk.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
- Voeg code toe om op de knop te reageren. Zie de tekst en het voorbeeld onder aan deze bladzijde.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script>
// Voorbeeld bovenaan deze bladzijde
var AantalGeklikt = 0;
function Geklikt() {
AantalGeklikt++;
document.getElementById('Knop').innerHTML = "Er is " + AantalGeklikt + " maal op deze knop geklikt";
}
</script>
(Zet dit in de <BODY op de plaats waar je het nodig hebt>).
<button id="Knop" value="KlikMij" type="button" onclick="Geklikt()"><b>Er is nog niet op deze knop geklikt</b></button>
Uitgewerkt voorbeeld: AAN - UIT schakelaar
Als je op de knop rechts klikt verandert de tekst op de knop van AAN
in UIT. Let ook op deze tekst ... |
|
Als er op de knop wordt geklikt wordt de function AanUit() aangeroepen.
Dat gebeurt met behulp van de event-handler onclick. De knop is aangemaakt met behulp van een <button>-tag en heeft id="AanUitKnop". De function AanUit() kijkt eerst of de knoptekst 'AAN' is. Als dat zo is wordt deze veranderd in 'UIT', anders wordt er weer 'AAN' in de knop gezet. De methode die wordt gebruikt is hetzelfde als bij het eerste voorbeeld. Merk op dat wat is geschreven over het gebruik van <input type="button"> in plaats van <button>, ook hier van toepassing is. De function AanUit() verandert ook de tekst en de kop van deze paragraaf. Die zijn daarvoor in een <span> ..... </span>-tag gezet, met id="AanUit_Kop" resp. id="AanUit_Tekst". De innerHTML van deze <span>-tags wordt veranderd. De code van dit voorbeeld staat in de downloadfile. |
|
Downloaden:
Druk op de knop:
File: voorb189.zip, 875 bytes.
