onclick Evenement
Voorbeeld
Voer een JavaScript uit wanneer er op een knop wordt geklikt:
<button onclick="myFunction()">Click me</button>
Definitie en gebruik
De onclick
gebeurtenis vindt plaats wanneer de gebruiker op een element klikt.
In HTML:
<element onclick="myScript">
In javascript:
object.onclick = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("click", myScript);
Technische details
bubbels: | Ja |
---|---|
Annuleerbaar: | Ja |
Evenementtype: | MuisEvent |
Ondersteunde HTML-tags: |
Allemaal behalve: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title> |
Meer voorbeelden
Klik op een <knop> om de datum weer te geven:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Klik op een <h3>-element om de tekstkleur te wijzigen:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Nog een voorbeeld van hoe je de kleur van een element kunt veranderen:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Klik om tekst van het ene invoerveld naar het andere te kopiëren:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Zo wijst u een "onclick"-gebeurtenis toe aan het vensterobject:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Gebruik onclick om een vervolgkeuzelijst te maken:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Gerelateerde pagina's
JavaScript-zelfstudie: JavaScript-evenementen
HTML DOM-referentie: ondblclick-gebeurtenis
HTML DOM-referentie: onmousedown-gebeurtenis
HTML DOM-referentie: onmouseup-gebeurtenis
Browserondersteuning
onclick
is een DOM Level 2 (2001)-functie.
Het wordt volledig ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |