Au sein du <div id="output"> se trouve un bouton <button>. À l'aide d'addEventListener(), faites en sorte que quand ce bouton est cliqué, il affiche Vous m'avez cliqué à la place de Cliquez-moi, comme c'est le cas dans l'exemple ci-contre.
Écrivez le code qui permet de faire ça. Dès que c'est fait, cliquez sur le bouton Exécuter le script pour exécuter le code.
Écrivez votre code
Console d'erreurs
Pas d'erreurs d'exécution ou de syntaxe
Rendu #output
Source HTML
Solutions
Avec une fonction anonyme
L'exercice est très simple, mais apporte néanmoins deux choses importantes : l'utilisation d'addEventListener() et des fonctions anonymes, mais aussi l'utilisation de this au sein de la fonction pour pointer vers l'élément HTML sur lequel l'évènement est déclenché :
var output, button;
if (output = document.getElementById("output")) {
if (button = output.getElementsByTagName("button")[0]) {
button.addEventListener("click", function() {
this.innerHTML = "Vous m'avez cliqué";
}, false);
}
}
On aurait aussi pu utiliser firstChild.data au lieu d'innerHTML, car ce dernier ne se justifie pas vraiment ici :
this.firstChild.data = "Vous m'avez cliqué";
Avec une fonction nommée
Il est évidemment possible d'utiliser une fonction nommée (qui n'est pas anonyme...), mais dans ce cas on perd le bénéfice de l'utilisation du this directement dans la fonction. En effet, il faut le passer en paramètre, ce qui nous oblige quand même à utiliser une fonction anonyme :
var output, button;
function changeText(element) {
element.firstChild.data = "Vous m'avez cliqué";
}
if (output = document.getElementById("output")) {
if (button = output.getElementsByTagName("button")[0]) {
button.addEventListener("click", function() { changeText(this); }, false);
}
}
En comptant sur Internet Explorer < 9
Comme expliqué dans le cours, ces versions d'Internet Explorer ne connaissent par addEventListener() et utilisent attachEvent. Si vous produisez un code qui se veut compatible, vous utiliserez certainement une fonction comme addEvent, vue dabs le cours :
function addEvent(element, event, func) {
if (element.addEventListener) {
element.addEventListener(event, func, false);
} else {
element.attachEvent('on' + event, func);
}
}
var output, button;
if (output = document.getElementById("output")) {
if (button = output.getElementsByTagName("button")[0]) {
addEvent(button, "click", function() {
this.firstChild.data = "Vous m'avez cliqué";
});
}
}
Un commentaire ? Un bug ? Contactez-moi !
Vous souhaitez proposer une autre solution ?
Un autre exercice ou une précision ?
Vous avez rencontré une erreur ?
Un exercice ne fonctionne pas ?
OpenClassrooms
Commentez directement dans le sujet dédié aux exercices