Code tout simple mais execution inattendue

**sarc20** · 28/03/2025, 04h17

Bonjour,

je m'autoforme au javascript de base

j'essaye de faire un exercice avec diff�rentes taches � faire

lje n'arrivais pas � faire la 5eme tache donc j'ai essaye de faire des modifications � differents endroits qui font que des taches faites avant ne marchent plus, si j'avais appris git, je n'en serais pas l�...
je viens de constater qu'une validation de formulaire pouvait se faire avec la touche enter mais qu'un input qui serait g�n�r� dans le cas d'une edition par exemple, faudrait passer par un addevent*... ou un on*pour prendre en charge la validation par entr�e

j'ai voulu repartir d'un fichier vide, faire un petit programme tout bete et je ne comprends pas l'execution

si je veux juste afficher ce que je rentre dans la zone de saisie, �a ne s'affiche pas dans ma console

si je rajoute un console.log(1) au dessus, l� la valeur de l'input apparait mais pas le console.log(1)

si je rajoute un console.log(0) , la le console.log(1) et la saisie input s'affichent mais pas le console.log(0)
j'ai essay� de mettre un const a = 2 pour esperer voir le 0 s'afficher, rien.

mon 1er affichage est donc toujours ignor�, pourquoi? j'ai fouin� dans la console � essayer de voir si je pouvais remonter, rien. j'ai test� diff�rentes petites choses mais je ne trouve pas , il est 3h30 du matin , honteux de rendre les armes.. mais si quelqu'un pouvait m'indiquer ou est le bug, j ce serait gentil. Merci. (edit 3h48, j'ai voulu tester d'autres choses)

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
  </head>
  <body>
    <form>
      <input type="text" />
      <button>Ajouter</button>
    </form>
 
    <script>
      const form = document.querySelector("form");
      const input = document.querySelector("input");
 
      form.addEventListener("submit", () => {
        console.log(0);
        console.log(1);
        const saisie = input.value;
        console.log(saisie);
        console.log(2);
        input.value = "";
      });
 
    </script>
  </body>
</html>

**gabi7756** · 28/03/2025, 08h08

Bonjour,
Pourquoi event submit ?
Tu veux bien r�expliquer si jamais tu comptes vraiment utiliser l'event submit stp

Sinon utilise l'event input qui se d�clenche d�s que saisie est faite
Cdt

**javatwister** · 28/03/2025, 16h44

Salut,

Sans avoir de solution au probl�me existentiel, je te propose (provisoirement) d'�crire ceci en d�but de listener:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
form.addEventListener("submit", (e) => {
  e.preventDefault();

Au moins, tu auras tous tes appels console.

**sarc20** · 28/03/2025, 21h08

Bonsoir gabi7756 et javatwister,

merci pour votre aide.

effectvement l'invocation de preventDefault a fait que les appels console se font normalement.

je n'oublierai plus jamais le preventDefault en soumettant un formulaire d�sormais

Merci � vous 2

**NoSmoking** · 29/03/2025, 11h58

Bonjour,

Envoy� par sarc20

je n'oublierai plus jamais le preventDefault en soumettant un formulaire d�sormais

je ne serais pas aussi cat�gorique, cela va d�pendre de ce que tu souhaites r�aliser, et je dois admettre qu'� la lecture de ton post je ne sais pas exactement ce que tu cherchais � faire via cet exercice

Ressource :

Event.preventDefault()

**sarc20** · 29/03/2025, 15h30

Bonjour NoSmoking,

Merci pour le lien, c'est instructif

comme je l'ai dis plus haut, j'essaye de me former un peu � Javascript, donc je cherche � comprendre des notions basiques.

la tache suivante � r�aliser dans un exercice me demandait de pouvoir valider une saisie d'un input en dehors d'un <form> avec la touche entr�e donc je voulais repartir d'une feuille blanche pour voir comment �a se passe dans un <form>

je voulais v�rifier que le champ input dans un <form> prenait en compte une saisie avec la touche Entr�e sans avoir � �couter l'�v�nement

sauf que je ne voyais pas la valeur entr�e s'afficher dans ma console, donc je me suis mis � ajouter un console qui me faisait apparaitre la valeur saisie mais pas la console donc j'ai multipli� les consoles....

l� j'ai rajout� un input en dehors du form pour voir comment je pourrais avancer sur mon exercice

je n'avais pas encore vu d'exemple d'�v�nement li� au clavier donc j'ai �t� chercher une vid�o qui me montre un exemple

j'ai donc recopi� ce bout de code

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
window.addEventListener("keyup", (key) => {
        if (key.key == "Enter") {}

pour arriver � �a

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
  <body>
    <form>
      <input type="text" />
      <button>Ajouter</button>
    </form>
    <div></div>
 
    <script>
      const form = document.querySelector("form");
      const input = document.querySelector("input");
 
      form.addEventListener("submit", (e) => {
        e.preventDefault();
        const saisie = input.value;
        console.log(saisie);
        input.value = "";
      });
 
      const div = document.querySelector("div");
 
      const scndinput = document.createElement("input");
      scndinput.setAttribute("type", "text");
 
      const scndbutton = document.createElement("button");
      scndbutton.innerHTML = "editer";
 
      div.append(scndinput, scndbutton);
      window.addEventListener("keyup", (key) => {
        if (key.key == "Enter") {
          console.log(scndinput.value);
          scndinput.value = "";
        }
      });

voil� je suis sorti d'un exercice avec plusieurs taches � r�aliser pour essayer d'y voir plus clair.

Code tout simple mais execution inattendue

JavaScript

Discussions similaires

Partager

Partager