Bonjour à tous,

Je suis actuellement en train de coder un site, j'aimerai utiliser le même javascript pour une même page. Pour cela, je modifie le DOM complètement lorsque l'utilisateur clique sur un bouton. Ainsi il n'y pas de changement de page mais le body a changé. Cependant je laisse en place les balises script. Ce nouveau body comprends notamment un bouton que je souhaite capter avec mon fichier js

Le problème est que les nouvelles balises HTML rajouté grace à .innerHTML ne semble pas être compris par mon fichier js puisque je n'arrive pas à rajouter de addEventListener sur mon nouveau bouton. C'est comme si le fichier js pensait que le DOM est toujours le même. Auriez vous une solution? 

Bonne journée !

C'est un problème courant. Quand tu reconstruis le DOM tu détruis les éléments que tu avais sélectionné et à qui tu avais attribué des événements.

Une solution est de sélectionner à nouveau les éléments et leur réattribuer les événements.

Une autre solution est de profiter du fait que les événements parcourent le DOM verticalement (voir event capturing et bubbling), d'assigner l'événement à un élément parent qui n'est pas détruit, en l'occurrence body, et de redistribuer les actions en fonction de la cible originelle de l'événement (voir documentation).

Ma recommandation C'est de ne pas tout jeter à la poubelle. Par exemple, garde tes éléments de navigation, ton footer, etc. Il n'y a que le contenu qui change que tu devrais mettre à jour. Ça devrait beaucoup simplifier les choses et c'est plus performant.

Merci beaucoup pour ta réponse. J'ai compris ton idée qui pourrait bien marcher pour moi, le truc c'est que j'ai deux événement distincts. Je vais essayer d'être plus clair.

A l'ouverture de ma page, je demande un pseudo. L'utilisateur le renseigne et valide son entrée avec Bouton1. J'ai un évent sur Bouton1, au clic, j'enregistre le pseudo et je change le div qui comprends toute la structure de la page. Je supprime donc le champ pour le pseudo ainsi que Bouton1.

Sur cette nouvelle page, un Bouton2 exise sur lequel je veux lier un évent. Cet évent est cependant différent de celui utilisé pour Bouton1. 

Du coup en utilisant Body.addListener je dirais que dans mon cas cela ne va pas vraiment fonctionner car l’évent diffère en fonction du Bouton,  ou alors je n'ai pas bien compris . J'ai aussi imaginé garder toute la seconde partie de la page en "hidden" mais je ne suis pas sur que ce soit une bonne solution. Pour info, je fais tout ce stratagème car je souhaite faire transiter des infos entre mes pages sans utiliser de PHP. Je code en effet une extension Chrome. De plus localStorage ou chrome.storage ne fonctionne pas non plus. Du coup j'imagine que la technique de changer le DOM pouvait m'aider...

-
Edité par VictorCL 5 avril 2020 à 16:17:47

Bonjour VictorCL

Je résume pour voir si je comprends bien ce que tu veux.

• sur ta page web tu as un champ de saisie, un bouton 1 avec event et une DIV
• lorsque bouton 1 est cliqué tu actualises la DIV, supprime le champ de saisie et bouton 1 avec son event, et tu crées bouton 2 avec un nouvel event

est-ce bien cela?

Cordialement

Oui exactement, c'est très bien résumé, et l’événement lié au Bouton 2 ne semble pas comprendre qu'il existe après appui du Bouton 1. Comme si le fichier js ne comprends pas la mise à jour de la page

Cordialement

-
Edité par VictorCL 5 avril 2020 à 16:47:23

Alors, pour si peu tu pourrais masquer la deuxième étape du formulaire, mais si tu tiens à tout supprimer par souci de cohérence tu peux avoir une structure comme ça

function init (step) {
  document.querySelector("button").onclick = actions[step];
}

const actions = {
  "pseudo": function () {
  // faire un truc
    init("étape 2");
  },
  "étape 2": function () {
    // faire un autre truc...
  }
};

init("pseudo");

À chaque fois qu'on clique sur le bouton, on fait quelque chose et quand c'est fini on initialise à nouveau le bouton, mais avec une autre action.

Ce genre de code n'est pas très adapté à quelque chose qui va monter en complexité, notamment parce que chaque action a des effets secondaires sur le document (typiquement on modifie le DOM, on enregistre un utilisateur, etc.), or si tu ne suis pas ces effets secondaires, tu ne peux pas prédire ce qui va se passer si tu lances plusieurs fois la même action par exemple, ou si tu les lance dans n'importe quel ordre, mais je te sens au tout début de ton apprentissage du JS donc je ne crois pas que ce soit le moment de te parler de design pattern

Bonjour VictorCL

Comme l'écrit tabouretBleu ton souhait risque d'être très compliqué si tu as de nombreuses itérations.

autrement je te propose le code suivant

A la suite du code HTML Tu peux à la suite lui associé un javascript de ce type:

function traiteData(elt){ //elt as input object id="bouton_1"
	//mise à jour de la div
	var mydiv = document.getElementById("myDiv");
	mydiv.innerHTML= "new text speudo"; //ou tout autre contenu
	
	//création de bouton_2
	var btn = document.createElement("BUTTON");        // Créer un élément <button>
	var t = document.createTextNode("CLICK ME");       // Créer un noeud textuel
	btn.appendChild(t);                                // Ajouter le texte au bouton
	elt.parentNode.insertBefore(btn, elt); //insère btn avant elt
	btn.addEventListener("click", function() { //ajoute un event à btn
			var mydiv = document.getElementById("myDiv");
			mydiv.innerHTML= "un autre texte pour speudo"; //ou tout autre contenu
			alert("You just clicked me!");
	});
	btn.id="bouton_2"; //identifiant unique pour btn

	//suppression de bouton_1
	//ici tu as 2 choix
	//soit tu caches seulement bouton_1
	elt.style.visibility = "hidden";
	alert("pour voir");
	//soit tu supprimes carrément bouton_1
	var parent = elt.parentNode; //cherche le parent de bouton_1
	parent.removeChild(elt); // supprime bouton_1 dans l'arbre de son parent

};

Je crée bouton_2 avant de supprimer bouton_1 car je me sert de l'emplacement de bouton_1 pour générer bouton_2 au même endroit.

Cordialement.

@claudebriard Bonjour, je viens de retirer des spams votre message, si cela arrive encore vous pouvez poster dans ce sujet Si votre message est considéré comme spam

Merci énormément à vous deux @tabouretBleu et @claudebriard, d'avoir pris le temps de comprendre mon problème et d'y trouver une solution. J'ai réussi à faire fonctionner mon code grâce à vous !:)

Cette entraide me pousse encore plus à apprendre vite et bien pour répondre à mon tour aux questions :) 

Bonne soirée,