Problème événement onclic
Bonjour,
Voila je rencontre un petit problème avec mon code. Je suis débutant en JS vanilla. Je voudrais juste déclencher ma fonction extraire_email au clic de la zone bleue. Mais ça ne marche pas... Je me doute que mon code est vraiment très simple mais je n'ai pas réussi à le faire marcher.
Ce que je fais
Décrivez ici votre code ou ce que vous cherchez à faire
<!DOCTYPE html>
<html>
<head>
<title>Extraction email</title>
</head>
<body>
<h1>Extraction email</h1>
<div style='width:200px; height:200px; background:blue;' id='test' onclick="extraire_mail(essai)"></div>
<script type="text/javascript" src="extraction_mail.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
var essai = "abcazdazd azdazd azd z dazd aazd@hotmail.com fafefzef";
function extraire_email(string){
var mail_debut;
var mail_fin;
var mail;
mail_debut = string.indexOf("@");
mail_fin = string.indexOf("@");
if (mail_debut){ // S'il y a un @ dans la page
while (string.charAt(mail_debut) != " "){ // on cherche le début de l'adresse email
mail_debut--;
}
mail_debut++;
while (string.charAt(mail_fin) != " "){ // on cherche la fin de l'adresse email
mail_fin++;
}
mail = string.substring(mail_debut , mail_fin); // on extrait le mail
alert(mail);
return mail;
}
}
var a;
a = extraire_email(essai);
console.log(a);
document.getElementById('test').onclick = extraire_email(essai);
});
Merci d'avance pour votre aide et bonne soirée à vous!
15 réponses
Déjà, est ce alert(mail); s'affiche ?
Est ce que ton fichier JS est bien chargé ? ( regarde dans tes souces dans le navigateur ).
Ensuite, le paramètre de ta fonction est "string" moi j'éviterais de mettre ca car c'est aussi le nom d'une classe javascript. Il peut y avoir des conflit.
Ensuite regarde dans ta console sur le navigateur si il n'y a pas une erreur qui s'affiche. Et si il y en a pas regarde dans le network.
Merci beaucoup de ta réponse! Oui alert(mail); fonctionne. Le seul problème vient vraiment du fait que l'événement ne marche pas.
Mon fichier JS est bien chargé par conséquent. J'ai essayé de changer le paramètre en "bidule" et ça ne change rien. :-)
Même la faute que j'ai repérée dans mon html où j'appelle la fonction extraire_mail au lieu de extraire_email ne change rien :/
En revanche, lorsque j'écris dans la console un simple console.log(essai), il me sort une erreur :
VM290:1 Uncaught ReferenceError: essai is not defined
at <anonymous>:1:13
Je ne comprends pas... Pourtant mon script s'effectue correctement.
Remplace tout ca par ca :
<!DOCTYPE html>
<html>
<head>
<title>Extraction email</title>
</head>
<body>
<h1>Extraction email</h1>
<div style='width:200px; height:200px; background:blue;' id='test' ></div>
<script type="text/javascript" src="extraction_mail.js"></script>
</body>
</html>
document.getElementById("test").addEventListener("click", extraire_email);
function extraire_email(string){
var mail_debut;
var mail_fin;
var mail;
mail_debut = string.indexOf("@");
mail_fin = string.indexOf("@");
if (mail_debut){ // S'il y a un @ dans la page
while (string.charAt(mail_debut) != " "){ // on cherche le début de l'adresse email
mail_debut--;
}
mail_debut++;
while (string.charAt(mail_fin) != " "){ // on cherche la fin de l'adresse email
mail_fin++;
}
mail = string.substring(mail_debut , mail_fin); // on extrait le mail
alert(mail);
return mail;
}
}Je pense que ca fonctionnera mieux. Perso j'ai jamais réussis à faire fonctionné un onclick xD
Coucou ! Merci mais non ça ne marche pas.
Uncaught ReferenceError: extraire_mail is not defined
at HTMLDocument.<anonymous> (extraction_mail.js:6)
Ce qui correspond à la ligne :
document.getElementById('test').addEventListener("click", extraire_mail);
Je vais m'arracher les cheveux! :-)
Tu as du mal recopier le code, ce n'est pas possible qu'il t'indique ça si tu as bien recopier.
Par contre, le "string" en paramètre de "extraire_mail" n'est pas bon, vu qu'il renvoi l'event du click et non un texte.
Salut,
Alors déjà, tel que tu as fait ton script, tu redéclares ta fonction extrait_email à chaque appel de l'event, ce n'est pas bon du tout.
Essaye plutôt ceci :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Extraction email</title>
</head>
<body>
<h1>Extraction email</h1>
<button style='width:200px; height:200px; background:blue;' id='test'>Test extract</button>
<script type="text/javascript" src="extraction_mail.js"></script>
</body>
</html>JavaScript
function extraire_email (str) {
var mail_debut;
var mail_fin;
var mail;
mail_debut = str.indexOf("@");
mail_fin = str.indexOf("@");
if (mail_debut){ // S'il y a un @ dans la page
while (str.charAt(mail_debut) != " "){ // on cherche le début de l'adresse email
mail_debut--;
}
mail_debut++;
while (str.charAt(mail_fin) != " "){ // on cherche la fin de l'adresse email
mail_fin++;
}
mail = str.substr(mail_debut , mail_fin); // on extrait le mail
alert(mail);
return mail;
}
}
var str_test = "abcazdazd azdazd azd z dazd aazd@hotmail.com fafefzef";
document.getElementById("test").addEventListener("click", function (e) {
e.preventDefault();
console.log(extraire_email(str_test))
return false;
});Merci à tous de votre aide, c'est bon ça marche, j'ai gardé la version du message de betaWeb du coup. :-) Je vais me pencher sur le e.preventDefault pour voir son utilité. :-)
ça permet de stopper l'évenement par défaut (par ex, si il y avait un lien sur ce que tu cliques, l'action d'aller sur le lien ne serait pas faites).
Par contre, je ne vois pas l'utilité du return false;
C'est justement ce que je me demandais. Peut-être betaWeb pourra nous dire s'il retombe sur ce sujet par hasard. Merci en tout cas! ;-)
@Kenor C'est une convention personnelle. Dans l'absolu il n'a pas d'intérêt, mais je préfère le mettre ;)
@Mathieu Giacometti Pas de quoi ;)
Si tu estimes que ton sujet est résolu, pense à l'indiquer comme tel.
Je reviens vite fait sur ce return false; car ça fait une légère différence quand même.
En effet, lorsque sur le callback du "on" on retourne "false", jQuery va déclencher 2 choses.
e.preventDefault() ET e.stopPropagation()
Ce qui fait quand même une différence, vu qu'on stoppe la propagation, ce qui peut avoir un effet de bord non voulu.
Pour voir la différence : https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault (voir les 2 exemples de la première réponse, c'est très bien choisi pour comprendre facilement)
(je l'apprend aussi, je suis tombé dessus par hasard pour tout autre chose ;))