Événement onclick
Exemple
Exécute un JavaScript lorsqu'un bouton est cliqué :
<button onclick="myFunction()">Click me</button>
Définition et utilisation
L' onclick
événement se produit lorsque l'utilisateur clique sur un élément.
En HTML :
<element onclick="myScript">
En Javascript :
object.onclick = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("click", myScript);
Détails techniques
Bulles: | Oui |
---|---|
Annulable : | Oui |
Type d'événement: | SourisEvénement |
Balises HTML compatibles : |
Tous sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
Plus d'exemples
Cliquez sur un <bouton> pour afficher la date :
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Cliquez sur un élément <h3> pour changer la couleur du texte :
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Un autre exemple sur la façon de changer la couleur d'un élément :
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Cliquez pour copier du texte d'un champ de saisie à un autre :
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Comment affecter un événement "onclick" à l'objet window :
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Utilisez onclick pour créer une liste déroulante :
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Pages connexes
Tutoriel JavaScript : Événements JavaScript
Référence HTML DOM : événement ondblclick
Référence HTML DOM : événement onmousedown
Référence HTML DOM : événement onmouseup
Prise en charge du navigateur
onclick
est une fonctionnalité DOM niveau 2 (2001).
Il est entièrement pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |