Discussion :

[nadfri2019]

Bonjour à tous,

Je n'ai pas trouvé de reponses convaiquante au sujet des boutons/input et la methode addEventListener.

Est-il possible de valider un input via un bouton sans passer forcement par un formulaire?

Je m'explique:
Je veux valider une entrée d'un utilisateur via un bouton, et à son déclenchement lancer une fonction JS qui testera la valeur.

Puis pouvoir de nouveau entrer une valeur et ainsi de suite. C'est à dire que le champs redevienne vierge et qu'on puisse de nouveau entrer une valeur et la tester via le bouton + addListener.

Tous les cours trouvés sur le net son un peu vague à ce sujet, soit on tombe sur des formulaires avec submit, soit la fonction addListener ne marche pas avec n'importe quelle type de bouton ect...D'ailleurs qu'elle est la syntaxe exacte à utiliser avec cette methode?

Cdt.

[Invité]

Bonjour,

...Tous les cours trouvés sur le net son un peu vague...
...qu'elle est la syntaxe exacte à utiliser avec cette methode?

Tu es sûr d'avoir cherché ?

• element.addEventListener

[nadfri2019]

Justement j'ai lu ce lien plusieurs fois, mais je trouve que c'est pas tres clair.

Par exemple, comment expliquer que ce simple code ne marche pas:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id"bouton">OK</button>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
let bouton = getElementById("bouton1");
bouton.addEventListener("click", alert("Bonjour"));

Pour le faire marcher, je dois passer par une fonction anonyme, je trouve cela étrange.

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

bouton.addEventListener("click", function(){alert("Bonjour")});

Il n'est spécifié nul part une syntaxe exacte à appliquer, mise à part qu'il faut retirer les parenthèses du nom de la fonction.

[Invité]

1- Parce qu'on doit écrire : document.getElementById.
ET id="bouton".

2- Il ne suffit pas de "lire", encore moins de "parcourir" les documents.
Ils contiennent aussi des EXEMPLES : TESTE-LES.

CONSEIL : mets au début du script JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"use strict";

Et regarde dans la "Console" de ton navigateur : touche "F12" -> "Console"

3- Quant à la syntaxe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let bouton = document.getElementById("bouton");
bouton.addEventListener("click", function(){ alert("Bonjour") });

On peut aussi écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

bouton.addEventListener("click", e => alert("Bonjour") );

[nadfri2019]

Désolé pour le manque du "document." j'ai écris un peu vite.

En fait si je lance le code, j'ai mon alert('bonjour') qui s'affiche avant même de cliquer sur le bouton.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="bouton1">OK</button>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let bouton = document.getElementById("bouton1");
bouton.addEventListener("click",alert("bonjour"));

Quel est la fonction de "use strict" exactement? je dois le mettre au début du code dans le fichier js?

Cdt.

[Beginner.]

...
Pour le faire marcher, je dois passer par une fonction anonyme, je trouve cela étrange.

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

bouton.addEventListener("click", function(){alert("Bonjour")});

Il n'est spécifié nul part une syntaxe exacte à appliquer, mise à part qu'il faut retirer les parenthèses du nom de la fonction.

En fait si je lance le code, j'ai mon alert('bonjour') qui s'affiche avant même de cliquer sur le bouton.

Cela n'est pas précisé car cela fait partie des règles générales...

Quand tu mets les parenthèses cela signifie que tu demandes l’exécution de la fonction et sans les parenthèses (c'est-à-dire juste le nom de la fonction) il s'agit d'une référence.

En paramètre de addEventListener c'est le nom de la fonction que nous devons mettre car on a besoin de la référence à cette fonction pour pouvoir l’exécuter seulement quand l’évènement est déclenché.

Et quand tu mets en paramètre une fonction avec les parenthèses alors celle-ci sera exécutée et ce n'est donc pas la référence à cette fonction que tu passes mais la valeur retournée par cette fonction aprés exécution si elle retourne quelque chose sinon ce sera undefined...

Quand tu fais cela :

bouton.addEventListener("click", alert("Bonjour"));.

c'est comme si tu faisais cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var res = alert("Bonjour");
bouton.addEventListener("click", res);

Et là tu vois bien que res n'est pas une référence à une fonction donc cela ne peut pas fonctionner...

Et là tu vois aussi pourquoi, comme tu l'as constaté, que l'alerte s’affiche sans que tu ais cliqué sur le bouton, c'est parce qu'elle a été exécutée à la ligne : var res = alert("Bonjour");