Export variable après click donne valeur vide dans module

Version imprimable

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:

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:

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

19/02/2024, 19h49
clickandgo

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" !
21/02/2024, 10h02
NoSmoking

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.

Citation:

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 !

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:

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:

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 ?

Citation:

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:

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:

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:

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

04/03/2024, 14h55
clickandgo
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:

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:

1 2 import { clickedDate } from "./agenda-semaine.js"; console.log("Date cliquée : " + clickedDate.valueAsDate);
07/03/2024, 18h20
NoSmoking
Citation:

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.

Citation:

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