Partage

actualisation des collections html

Sujet résolu

28 avril 2022 à 14:43:06

Bonjour,

Je suis en train d'écrire un programme qui ajoute un <textarea> dans un <form> qui contient déjà d'autre <textarea>.

Avec des divs, j'ai fait un bouton contrôle sous chaque <textarea>

Quand j'appuie sur contrôle, une liste de contrôle (ajouter champ, supprimer champ etc) s'affiche (la liste est créée suite à l'appui sur contrôle --> je ne veux pas encombrer mon html en ayant une liste de contrôle par champ)

Au premier ajout tout va bien, mais par la suite quand j'appuie sur contrôle, tout se passe comme si le nouveau contrôle a le même indice dans la collection html que celui dont il prend la place. En clair ma liste de contrôle s'affiche en décaler (sous le mauvais bouton contrôle)

Merci d'avance pour votre aide !!!

<pre class="brush: javascript;">

letlistenCtrl = (fatherSRank = 0, brotherSRank) => {

document.getElementsByClassName('ad')[0].addEventListener('click', () => {

//ajoute un ensemble textarea + bouton etc

elt.newCpZone(0, brotherSRank);

listen();

});

document.getElementsByClassName('suppr')[0].addEventListener('click', () => {

alert('ho')

});

document.getElementsByClassName('reg')[0].addEventListener('click', () => {

alert('c')

});

document.getElementsByClassName('fct')[0].addEventListener('click', () => {

alert('le pere noel')

});

listen();

}

letlisten = () => {

// écoute tous les boutons contrôle

letctrls = document.getElementsByClassName("ctrl-btn");

for (letelt = 0; elt < ctrls.length; elt++) {

ctrls[elt].addEventListener('click', () => {

if (!document.getElementById('ctrl-menu')) {

console.log(elt);// affiche un numéro inférieur au bouton cliqué

console.log(document.getElementsByClassName('ctrl-btn'))

//ajoute et affiche un menu sous le bouton contrôle

document.getElementsByClassName('ctrl')[elt].appendChild(window.elt.newMenu());

reg.actualWork(elt);

listenCtrl(0, elt);

removeCtrlMenu(elt);

}

}, false);

}

</pre>

-
Edité par fbaury 29 avril 2022 à 11:04:31

AbcAbc6

28 avril 2022 à 16:03:56

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Arthur222

30 avril 2022 à 11:53:29

Moi, quand je fais un test simple, ça marche bien, la div rouge que je rajoute se met bien en-dessous du bouton control :

<body>
    <button class="ctrl-btn">ctrl1</button>
    <button class="ctrl-btn">ctrl2</button>
    <button class="ctrl-btn">ctrl3</button>

    <script>
        function newMenu(){
            let el = document.createElement("div");
            el.className = "rouge";
            el.textContent = "rouge"
            return el;
        }

        let ctrls = document.getElementsByClassName("ctrl-btn");
        for (let elt = 0; elt < ctrls.length; elt++) {
            ctrls[elt].addEventListener('click', () => {
                ctrls[elt].appendChild(newMenu());
            });
        }
    </script>
</body>

avec le css :

        .rouge { position:relative; width:100%; height:100%; background-color: red; }

Sinon pour le code, c'est ce bouton :

(parfois le code ne passe pas, c'est un bug d'openclassrooms)

fbaury

30 avril 2022 à 17:52:06

Bonjour,

Merci pour ta réponse.

Effectivement, ma div de contrôle s'ajoute au bon endroit.

Le problème vient aprés --> une fois que j'ai ajouté une nouvelle zone de texte (via ma div de contrôle), les divs de contrôle n'apparaissent plus au bon endroit.

(elles sont décalés d'une zone de texte, puis deux, puis trois et ainsi de suite à chaque fois que j'ajoute une zone de texte)

Arthur222

30 avril 2022 à 19:30:15

Tu peux utiliser les attributs "data-" et cibler la bonne div qui va recevoir les champs, par exemple je mets data-index dans le bouton de control, cet index va cibler le menu avec le même index dans data-menu, et quand on clique sur "ajouter", le textarea va s'ajouter dans le conteneur avec le même index dans data-cont :

<body>
    <button class="ctrl-btn" data-index= "0">ctrl1</button>
    <div class="menu" data-menu= "0"></div>
    <div class="conteneurSousMenu" data-cont= "0"></div>

    <button class="ctrl-btn" data-index= "1">ctrl2</button>
    <div class="menu" data-menu= "1"></div>
    <div class="conteneurSousMenu" data-cont= "1"></div>

    <button class="ctrl-btn" data-index= "2">ctrl3</button>
    <div class="menu" data-menu= "2"></div>
    <div class="conteneurSousMenu" data-cont= "2"></div>



    <script>
        let ctrls = document.getElementsByClassName("ctrl-btn");
        for (let elt = 0; elt < ctrls.length; elt++) {
            ctrls[elt].addEventListener('click', (e) => {
                let menu = document.querySelector('[data-menu="'+elt+'"]');
                if (menu.innerHTML == "") menu.appendChild(newMenu(elt));
            });
        }
        function newMenu(index){
            let btnAjouter = document.createElement("button");
            btnAjouter.index = index;//on passe l'index du control cliqué pour le récupérer dans la fonction
            btnAjouter.addEventListener("click", ajouter);
            btnAjouter.textContent = "ajouter";
            
            let btnEffacer = document.createElement("button");
            btnEffacer.index = index;
            btnEffacer.addEventListener("click", effacer)
            btnEffacer.textContent = "effacer";
            
            let conteneur = document.createElement("div");
            conteneur.appendChild(btnAjouter);
            conteneur.appendChild(btnEffacer);
            return conteneur;
        }

        function ajouter(e){
            let ta = document.createElement("textarea");
            ta.rows = 5;
            ta.cols = 10;
            let conteneur = document.querySelector('[data-cont="'+e.currentTarget.index+'"]');
            if (conteneur.innerHTML == "") conteneur.appendChild(ta);
        }
        function effacer(e){

        }
        
    </script>

-
Edité par Arthur222 30 avril 2022 à 19:33:44

fbaury

4 mai 2022 à 14:47:35

Bonjour,

Excuse ma réponse tardive.

En fait, quand je clic sur un sur une Div contrôle après avoir ajouter un une zone, quand je clic sur un bouton situer en-dessous contrôle en-dessous de mon ajout, la variable elt de mon listener n'est plus la bonne (console.log(elt) affiche 2 au lieu de 3 si j'ai ajouter une zone au rang 2).

Comme si ma collection html ne s'actualise pas (pourtant quand je fait un console.log(macollection)) tout est bon.

J'ai déjà tenté de relancer ma fonction listen après l'ajout d'une zone --> résultat identique

Arthur222

4 mai 2022 à 20:41:16

C'est pas hyper clair comme ça, peut-être met tout le code quelque part, soit dans un message avec le bon bouton code, soit sur github. Pour qu'on puisse tester et se rendre compte. Ton window.elt par exemple ne m'inspire pas trop. Sinon essaie avec les data- et vois ce que ça fait, tu peux faire aussi clic droit (sur un élément de la page) > inspecter, pour voir le html changer en cours quand tu manipules les éléments dans la page, ça peut aider à trouver un bug.

gc-nomade

4 mai 2022 à 23:15:40

Bonsoir,

idem, quel est le probléme ? javascript ou mise en forme ?

Ton code fonctionne même en ajoutant la fonction effacer, il n'y a pas de bug à priori : ton code dans un fiddle pour le tester et partager en live : https://jsfiddle.net/dxgpjqr6/

1 click montre tes deux boutons, ajouter crée et affiche ton textarea et effacer efface le textarea ou le vide https://jsfiddle.net/dxgpjqr6/2/ selon l'idée de ta fonction effacer().

C'est sur que sans style, c'est moyen. A quoi est-ce supposé ressembler en fait ?

-
Edité par gc-nomade 4 mai 2022 à 23:18:53

Quelques ressources pour PluXml, CMS Français sans BDD (XML) github : repos Github amateur, pas dev

fbaury

5 mai 2022 à 13:44:47

Voilà le lien github :

https://github.com/francois632010/cpSimplifie

J'ai nettoyé les fichiers au maximum pour ne voir que le problème.

Pour tester le code : 1) appuis sur contrôle 2) appuis sur + 3) appuis sur esc pour sortir du menu 4) appuis sur un bouton contrôle en dessous de l'ajout effectué

Réponse pour le window.elt --> j'utilise des modules via l'objet window pour la phase de développement. Window.elt me permet de différencier le module elt.js de la variable elt (L'utilisateur aura lui un seul fichier html)

-
Edité par fbaury 5 mai 2022 à 13:45:57

Arthur222

5 mai 2022 à 21:19:07

J'ai trouvé ton problème mais je n'arrive pas à le résoudre, en fait tes addEventListener ont enregistré chaque menu ctrl avec son elt, et ensuite tu rajoutes un élément qui rajoute un nouveau listener, donc l'appel du click est appelé 2 fois, une 1ere fois sur l'ancien elt, et une 2e fois sur le nouveau elt.

Pour vérifier, tu peux faire ça dans la fonction listen : tu rajoutes un attribut "truc" à chaque ctrl, à voir en faisant clic droit dans la page > inspecter l'élément, tu ouvres chaque article, sur chaque ctrl, tu as un attribut qui s'ajoute "truc" :

for (let elt = 0; elt < ctrls.length; elt++) {
        ctrls[elt].setAttribute("truc", elt);

        function custom (e) {
            console.log("ctrl.truc : "+ctrls[elt].getAttribute("truc"));
            if (!document.getElementById('ctrl-menu')) {       
                console.log("elt : "+elt);     
                document.getElementsByClassName('ctrl')[elt].appendChild(window.elt.newMenu());
                listenCtrl(0, elt);
                removeCtrlMenu(elt);
            }
        }
        ctrls[elt].addEventListener('click', custom);
    }

Ensuite au chargement de la page, quand tu cliques sur le ctrl 2 au départ, tu rajoutes "+++", tu fermes "esc".

Tu cliques alors sur le ctrl 4, et tu as les 2 appels dans la console, sur l'index 2 et l'index 3, au lieu d'avoir que l'index 3 (j'écris ctrl 4 quand on compte de 1 à 4, pour les index de 0 à 3)

Pour ça donc, j'ai pensé rajouter des removeEventListeners au départ dans une boucle, mais ça ne marche pas. Et comme je vais pas passer 2 heures à chercher, je te laisse avec ce début de réponse

-
Edité par Arthur222 5 mai 2022 à 21:20:51

fbaury

10 mai 2022 à 21:08:39

Bonjour,

J'ai résolu mon problème de la façon suivante :

Je crée des class c0 c1 etc

A chaque fois que j'ajoute une zone, j'actualise les class (si j'ajoute une zone avant c2, la zone ajoutée s'appelle c2 et l'ancienne c2 devient c3 etc)

Lien vers le github : https://github.com/francois632010/cpSimplifie

C'est beaucoup de travail. Au cas où quelqu'un a une solution plus élégante, je laisse le sujet ouvert.

Salut et merci pour le temps accordé.