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