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