Export variable après click donne valeur vide dans module

**clickandgo** · 19/02/2024, 13h12

Bonjour à tous,

Je cherche à récupérer une valeur de date dans un autre module après click, or, la valeur retournée est "empty string" :

Dans le premier module j'ai écris :

Code :

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

1
2
3
4
5
6
let clickedDate = "";
const linkLundi = document.querySelector(".linkLundi");
linkLundi.addEventListener("click", (e) => { 
clickedDate = dateLundi.toLocaleDateString(); 
}); 
export { clickedDate };

J'ai bien ma valeur de date correcte au click.

Dans le deuxième module j'importe la variable clickedDate :

Code :

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

1
2
import {clickedDate} from "./agenda-semaine.js" 
console.log("date choisie :",clickedDate)

Curieusement la variable devient empty...
Si je rentre manuellement une valeur cependant elle est correctement exportée et lisible dans le deuxième module.

Faut-il utiliser un await ou truc du genre pour que ça marche ?

Merci d'avance pour vos réponses

**clickandgo** · 19/02/2024, 19h49

Merci d'avoir répondu,

la deuxième solution ne marche pas et la première (plus facile à apéhender) continue à renvoyer un "empty string" !

**NoSmoking** · 21/02/2024, 10h02

Bonjour,
j'ai du mal à comprendre la démarche !

Au chargement ta variable est vide aussi dans ton module lorsque tu fais un console.log il n'y a encore rien dedans ce qui est normal puisque celle-ci n'est modifiée que lors d'un événement clic.

Faut-il utiliser un await ou truc du genre pour que ça marche ?

il faut revoir ton approche ou nous préciser ce que tu souhaites réellement obtenir !

**clickandgo** · 28/02/2024, 19h17

Bonjour NoSmoking

Merci d'avoir répondu.

Voici ce que je veux faire :

J'ai créé un agenda hebdomadaire dont les entêtes de colonnes contiennent des dates corrélatives (remplies dynamiquement par le code dans le module agenda.js).
Chaque titre de colonne (date) dispose d'un lien en tant qu’icône qui au clic ouvre le formulaire correspondant de saisie de rdv.
Tout cela marche sans problème sauf que je dois injecter dans ledit formulaire la même date sur laquelle a cliqué l'utilisateur de façon à faciliter la saisie et éviter les erreurs...

Le code attaché au formulaire se trouve dans un autre module car le formulaire est indépendant de l'interface représentant l'agenda.

Je cherche donc à exporter la valeur de date au clic sur le lien dans l'interface de l'agenda dans l'autre module pour pouvoir préremplir mon champ de formulaire (symfony).

J'ai essayé en faisant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
export const clickedDate = { current: "" };
...
 
//Colonne du lundi
  dateLundi = new Date(inputDebutSemaine.value);
  jourRdv = dateLundi.toISOString().split("T")[0];
 
  btnLundi.addEventListener("click", () => {
    clickedDate.current = jourRdv;
 
  });

puis j'importe :

Code :

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

1
2
import {clickedDate} from "./agenda-semaine.js"
console.log(clickedDate.current)

Manque de bol la valeur retournée est "empty string" !

Apparemment la valeur de la variable n'est pas actualisée dans l'eventListener avant exportation, comment faire alors ?

**NoSmoking** · 02/03/2024, 09h10

Apparemment la valeur de la variable n'est pas actualisée dans l'eventListener avant exportation, comment faire alors ?

et pourquoi serait-elle actualisée sans action ?

Je te mets un petit exemple, pas forcément top, des relations que tu pourrais avoir :
index.html

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modules</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="module-main.js"></script>
<style>
button {
  font: inherit;
  width: 3em;
  font-weight: 700;
  margin: 0 .5em;
  cursor: pointer;
}
</style>
</head>
<body>
<p><button class="btn-action" data-inc="-1">-1</button><button class="btn-action" data-inc="1">+1</button>
<p><button class="btn-action" data-inc="-3">-3</button><button class="btn-action" data-inc="3">+3</button>
<p><output id="result"></output>
</body>
</html>

module-main.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
import {labelMonths as MOIS, actionButton} from "./module-click.js" ;
 
const buttons = document.querySelectorAll(".btn-action");
buttons.forEach((btn) => {
  btn.addEventListener("click", actionButton);
});
 
export const afficheResultat = (valeur) => {
  const elemDest = document.getElementById("result");
  elemDest.textContent = `(${valeur}) ${MOIS[valeur]}`;
};

module-click.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
import {afficheResultat} from "./module-main.js" ;
 
let count = 0;
 
export const labelMonths = "Janvier,Février,Mars,Avril,Mai,Juin,Juillet,Août,Septembre,Octobre,Novembre,Décembre".split(",");
 
export const actionButton = (ev) => {
  const btn = ev.target;
  count += Number(btn.dataset.inc);
  if (count < 0) count = labelMonths.length + count;
  afficheResultat(count % 12);
}
window.onload = () => afficheResultat(count);

Bon le découpage vaut ce qu'il vaut, c'est juste une façon de te montrer les différents appels

**clickandgo** · 04/03/2024, 14h55

Merci beaucoup pour cette réponse, malheureusement je n'arrive toujours pas à comprendre pourquoi la variable n'est pas correctement exportée que ce soit en tant qu'objet ou simple variable, j'obtiens une valeur undefined ou bien empty string.

Pourtant la variable est bien actualisée après le click dans le premier module :

Code :

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

1
2
3
4
5
6
7
export let clickedDate = "";
 
...
  btnLundi.onclick = () => {
    clickedDate = dateLundi.toISOString().split("T")[0];
    alert(clickedDate);
  };

Module important la variable :

Code :

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

1
2
import { clickedDate } from "./agenda-semaine.js";
console.log("Date cliquée : " + clickedDate.valueAsDate);

**NoSmoking** · 07/03/2024, 18h20

malheureusement je n'arrive toujours pas à comprendre pourquoi la variable n'est pas correctement exportée que ce soit en tant qu'objet ou simple variable, j'obtiens une valeur undefined ou bien empty string.

Cette variable est tout à fait bien exportée mais au moment du « parsage » de ton code JavaScript et lors de la rencontre du code console.log(la_variable) cette instruction est exécutée mais à ce moment là la variable ne vaut rien. Par la suite cette ligne, instruction, ne sera plus jamais exécutée.

Pourtant la variable est bien actualisée après le click dans le premier module :

Oui et même dans les modules où elle est visible, mais tu n'en fais rien. Il t'appartient donc d'en faire quelque chose une fois celle-ci modifiée, as-tu regardé l'exemple fourni ?

Ressources :

je te conseille la lecture de

Les modules en JavaScript

Export variable après click donne valeur vide dans module

JavaScript

Discussions similaires

Partager

Partager