Discussion :

[Gregory_007]

Bonjour à tous et merci d'avance pour votre aide.

Je commence l'apprentissage de javascript et de Firebase.

Il y a un concept que je ne comprend pas et qui me bloque. Je n'arrive pas a ajouter les interactions avec des boutons dans mes pages html et dans mon javascript. Peut être que ma façon de faire n'est pas la bonne, alors je suis preneur de conseil.

J'ai 2 pages html : login et menu
J'ai un fichier de javascript.

pour utiliser les modules de Firebase j'ai dans l'entête de mes fichiers html le chemin pour le seul fichier javascript:

Code :

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

<script type="module" src="../javascript/login.js"></script>

J'ai un bouton dans ma page login

Code html :

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

<button type="button" onclick ="DB_LOGIN()" id="login" class="btn btn-secondary">Connexion</button>

et un bouton dans ma page menu

Code html :

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

<button type="button" onclick ="DB_ADD()" id="bdadd" class="btn btn-secondary">Ajouter</button>

Dans le fichier javascript (il y a : import de Firebase, config, etc), j'ai les évènements relatif à mes boutons

Code :

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

1
2
3
4
5
var log1 = document.getElementById("login");
log1.addEventListener('click',DB_LOGIN);
 
var add1 = document.getElementById("bdadd");
add1.addEventListener('click',DB_ADD);

Le premier bouton login me redirige vers la page menu et celui-ci fonctionne (je reçois bien les infos de Firebase). Par contre une fois redirigé var la page menu, le second bouton dans la page menu ne fonctionne pas et me donne l'erreur ci-dessous:


Est-ce que quelqu'un pourrait m'aider ou me conseiller ?

Merci

[mathieu]

peut-être que le code html n'est pas encore complètement chargé quand le code javascript se lance.

essayez comme cela :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
document.addEventListener("DOMContentLoaded", e => {
 
	var log1 = document.getElementById("login");
	log1.addEventListener('click', DB_LOGIN);
 
	var add1 = document.getElementById("bdadd");
	add1.addEventListener('click', DB_ADD);
 
 
});

[Gregory_007]

Bonjour,

Je viens de découvrir la raison, mais je ne sais pas comment la régler. As tu une idée ?

Code :

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

1
2
3
4
5
var log1 = document.getElementById("login");
log1.addEventListener('click', DB_LOGIN);
 
var add1 = document.getElementById("bdadd");
add1.addEventListener('click', DB_ADD);

L'ID "bdadd" est sur l'autre page html (page menu). Quand je suis sur la page "admin" pour m'enregistrer, "bdadd" n'est pas présent, c'est a ce moment que l'erreur arrive en me disant que "bdadd" n'existe pas. C'est tout nouveau le html et javascript, est-ce qu'il y a des bonnes pratiques à avoir style un fichier .js pour chaque page html ?

Merci

Grégory

[mathieu]

pour beaucoup de langages je pense que le plus important est d'avoir du code facile à comprendre quand on revient sur le projet 6 mois plus tard. et donc un des mes conseils est de ne pas hésiter à répartir le code dans plusieurs fichiers.

ensuite pour votre projet, il y a plusieurs possibilités :

• vous pouvez tout charger à chaque page et ensuite tester si le bouton existe ou pas. cette solution fonctionne surtout si sur la plupart des pages le bouton n'existe pas, dans le cas contraire ça serait un gaspillage de ressources de tester un bouton qui est souvent là.
• ou alors vous ne chargez pas les mêmes fichiers selon la page où vous êtes

[Gregory_007]

Après recherche, j'ai trouvé mon problème.

Il faut mettre dans un fichier javascript l'import de Firebase et dans un autre fichier javascript les fonctions pour lire la la base de donnée (si on charge une autre page html).

Merci pour ton aide et conseil.