Méthode addEventListener sur INPUT et BUTTON

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.

Bonjour,

Citation:

---

Envoyé par nadfri2019

...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é ? :weird:

• element.addEventListener

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:

---

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

---

Code:

---

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:

---

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.

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

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:

---

"use strict";

---

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

3- Quant à la syntaxe :

Code:

---

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

---

On peut aussi écrire :

Code:

---

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

---

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:

---

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

---

Code:

---

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.

Citation:

---

Envoyé par nadfri2019

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

Code:

---

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.

---

Citation:

---

Envoyé par nadfri2019

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:

---

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");

Je commence à mieux comprendre, j'ai lu différents cours sur le JS, il ne parle pas de ces spécificités que je trouve importantes, où avez vous appris ces détails?

Pour revenir à nos moutons, peut-on recuperer la valeur d'un input via un bouton, sans passer par un form?

Ex:

Code:

---

1 2	<input type="text"/> <button>C'est parti!</button>

---

Quand on appui sur le bouton, je voudrais donc appliquer une fonction qui récupère le "value" entrée via le champ. Puis on stock cette valeur dans un tableau. Puis le champ doit être réinitialiser pour qu'on puisse une nouvelle fois le saisir.

Cdt.

Citation:

---

Envoyé par nadfri2019

Je commence à mieux comprendre, j'ai lu différents cours sur le JS, il ne parle pas de ces spécificités que je trouve importantes, où avez vous appris ces détails?

---

Je ne sais plus comment j'ai appris ça, il doit sûrement y avoir des cours qui en parlent... Il y a aussi le fait d'avoir vu ce genre de choses dans d'autres langages...

Citation:

---

Envoyé par nadfri2019

Pour revenir à nos moutons, peut-on recuperer la valeur d'un input via un bouton, sans passer par un form?

---

Oui bien sûr c'est possible... Les "input" ont une propriété "value" que l'on peut lire ou modifier...

Citation:

---

Envoyé par nadfri2019

Quand on appui sur le bouton, je voudrais donc appliquer une fonction qui récupère le "value" entrée via le champ. Puis on stock cette valeur dans un tableau. Puis le champ doit être réinitialiser pour qu'on puisse une nouvelle fois le saisir.

---

Voici un exemple pour la première partie que tu peux tester ici : https://jsbin.com/lucivekoba/edit?ht...console,output
(la valeur du champ s'affiche dans la console à chaque clique).

Code:

---

1 2	<input id="ID_input1" type="text"/> <button id="ID_bouton1">C'est parti!</button>

---

Code:

---

1 2 3 4 5 6 7 8

let input1 = document.getElementById("ID_input1"); let bouton1 = document.getElementById("ID_bouton1"); bouton1.addEventListener("click", click_bouton1);   function click_bouton1 () { var value_input1 = input1.value ; console.log(value_input1); }

---

A toi de réfléchir pour la seconde partie...

Merci beaucoup ca marche nickel en effet.

Donc on est pas obligé de lier le champ avec le bouton via un form?

Comme tu as pu le voir il n'y a pas de formulaire dans l'exemple alors oui c'est possible...

Parcontre,

Via cette methode, on ne peut plus valider le champ via la touche entrée, et l'attribut required ne semble plus marcher.

Connaissez-vous une alternative? mise à part passer par du javascript.

Cdt.

1- L'"alternative" est de passer par un formulaire "classique", avec balise <form> et <input type="submit" />

Explique clairement ce que tu veux faire, parce que là... on ne te suis pas.

2- D'autre part, on n'est pas là pour te faire un cours magistral de JS.
Il faut que tu fasses aussi des recherches personnelles.

• Le mode strict

1. D’après tous les cours que j'ai lu sur les formulaires, ils nécessitent un traitement via php lors du "submit".

Vu que je suis entrain de me faire la main en codant un petit jeu en HTML/Javascript, j'ai juste besoin d'un champ pour valider le pseudo et un autre pour valider la valeur entrée du joueur dans un 2eme champ.

Avec le form, je peux rendre obligatoire la saisie du pseudo, et empêcher d'entrée une valeur "vide" dans le 2eme sans devoir gérer cela par JS avec des conditions du type if/while par exemple.

Comme, le jeu est assez répétitif (rentrer une valeur, vérifier si elle est correcte, sinon entrer une nouvelle valeur), il est plus facile de valider les saisie par la touche "Entrée" du clavier plus tot que de déplacer la souris pour cliquer sur le bouton à coté.

Je sais que vous n'etes pas là pour le faire à ma place, mais ça fait 1 semaine que je planche sur ces petits détails ennuyeux sans vraiment trouver sur google quelque chose d'efficace.

2. "use strict" : je ne suis pas encore au niveau pour tout bien comprendre, pour le moment j'en conclus que ça renvoi plus d'erreurs au debogger, ce qui n'est pas un mal car je trouve JS pas assez "strict" à ce niveau

J'ai réussi à faire fonctionner mon programme, voici ce que j'ai fait pour ceux que ça intéresse.

Code:

---

1 2	<input id="input1" type="number" placeholder="Ex : 10"/> <button id="bouton1">C'est parti!</button>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

let idBouton1 = document.getElementById("bouton1"); let idInput1 = document.getElementById("input1"); tableau=[];   idBouton1.addEventListener('click', intro); //valide l'entrée par le bouton idInput1.onkeyup = function() {if (event.keyCode == 13) intro();}; //valide l'input par la touche entrée   function intro() { idInput2.value = ""; //à chaque appel initialise l'affichage du champ afin de voir le "placeholder" tableau[x]=idInput1.value; // enregistre la valeur du champ dans un tableau }

---