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 }

---