Au sein du <div id="output"> se trouvent deux champs de texte donnant la possibilité à l'utilisateur d'entrer son adresse e-mail, et de la ré-entrer pour confirmer qu'il ne s'est pas trompé. Réalisez un script qui compare les deux adresses et se déclenche quand l'utilisateur vient d'entrer une lettre (avec l'évènement onkeyup), comme dans l'exemple ci-contre. Faire la vérification lors de la perte du focus (avec onblur) peut être utile aussi. Vous pouvez utiliser les classes CSS red et green sur les <input /> pour montrer que le contenu est mauvais ou bon.
É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
var email_1 = document.getElementById('email-1'),
email_2 = document.getElementById('email-2');
Pas d'erreurs d'exécution ou de syntaxe
Rendu #output
Source HTML
Solutions
Avec une fonction anonyme
Une première façon de faire serait de définir une fonction anonyme que l'on affecte aux différents gestionnaires qu'il est possible de chaîner comme des variables. Ainsi, la fonction est affectée dans les 4 gestionnaires d'un seul coup ! Au sein de la fonction, rien de très compliqué puisqu'on regarde le contenu des champs et on modifie la class CSS des champs en conséquence.
var email_1 = document.getElementById('email-1'),
email_2 = document.getElementById('email-2');
if (email_1 && email_2) {
email_1.onkeyup = email_2.onkeyup = email_1.onblur = email_2.onblur = function() {
var value_1 = email_1.value;
var value_2 = email_2.value;
if (value_1 && value_2) { // Si les deux champs contiennent quelque chose
if (value_1 === value_2) {
email_1.className = "green";
email_2.className = "green";
} else {
email_1.className = "red";
email_2.className = "red";
}
}
};
}
Mais tout ça est un peu trop verbeux ; faisons plus court :
var email_1 = document.getElementById('email-1'),
email_2 = document.getElementById('email-2');
if (email_1 && email_2) {
email_1.onkeyup = email_2.onkeyup = email_1.onblur = email_2.onblur = function() {
var value_1 = email_1.value,
value_2 = email_2.value;
if (value_1 && value_2) { // Si les deux champs contiennent quelque chose
email_1.className = email_2.className = (value_1 === value_2) ? "green" : "red";
}
};
}
Avec une fonction nommée
Il était évidemment possible d'utiliser une vraie fonction à la place d'une fonction anonyme :
function compareEmails() {
var email_1 = document.getElementById('email-1'),
email_2 = document.getElementById('email-2');
var value_1 = email_1.value,
value_2 = email_2.value;
if (value_1 && value_2) { // Si les deux champs contiennent quelque chose
email_1.className = email_2.className = (value_1 === value_2) ? "green" : "red";
}
}
var email_1 = document.getElementById('email-1'),
email_2 = document.getElementById('email-2');
if (email_1 && email_2) {
email_1.onkeyup = email_2.onkeyup = email_1.onblur = email_2.onblur = compareEmails;
}
En plus cette solution permet d'utiliser addEventListener() :
