Discussion :

[cmoimoly]

Bonjour,
Je dois intégrer plusieurs balises html (ex : <div id="mysection"><div class = "mycontainer"><h1>mytitle</h1></div></div>) pour formater visuellement certaines données (dans l'exemple "mytitle").

Pour être plus concret, dans mon HTML j'ai une balise <span id="datahere"></span> qui ressort les données en javascript que je dois ainsi modifier :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Bigdata(title, subtitle, type) {
        const mydata = document.getElementById('datahere');
        mydata.innerHTML += title + subtitle + (type ? ' <strong>(type is ' + type + ')</strong>' : '') +'<br/>';
    }
         //élément dans lequel les données sont initialisées, visible dans un autre <span>
        const sprit = document.getElementById('sprit');
 
        //lorsqu'un message donné est reçu
        sprit.addEventListener(SpritEvents.MessageSprit, ({ data }) => {
 
            Bigdata('Sprit', data.text, data.type);
            // s'il y a des actions, nous proposons des liens
            if (data.actions) {
                var links = '';
                for (var i = 0; i < data.actions.length; i++) {
                    if (i > 0) {
                        links += ', ';
                    }
                    let act = data.actions[i];
                    links += '<a data-val="' + act.value + '">' + act.title + '</a>';
                }
                Bigdata('Sprit', links);
            }
        });

Mon problème, car novice, et que je n'arrive pas à intégrer les balises qui doivent "contenir" des données (titre, sous-titre, type) AVEC des liens s'il y a des actions ...
si j'ajoute mes balises comme ceci :

Code :

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

mydata.innerHTML += '<div id="mysection"> <div class="mycontainer"><h1>' + title + '</h1>' + subtitle + (type ? ' <strong>(type =' + type + ')</strong>' : '') +'<br/></div></div>';

cela n'entoure pas le tout, les div et le h1 sont dupliqués : entoure d'un côté le titre, le sous-titre, le type et de l'autre côté les liens... la structure ressort ainsi :

Code HTML :

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

<div id="mysection"><div class="mycontainer"><h1>title</h1>subtitle <strong>(type = the_type)</strong><br/></div></div> <div id="mysection"> <div class="mycontainer"><h1></h1><a data-val="">link1</a>,<a data-val="">link2</a>)<br/></div></div>

Je ne sais pas comment m'y prendre... je vois bien que J'espère que vous pourrez m'aider

[NoSmoking]

Bonjour,

cela n'entoure pas le tout, les div et le h1 sont dupliqués

dans ta fonction Bigdata tu affectes un observateur d'événement, addEventLister dans lequel tu appelles cette même fonction, qui va ajouter un autre observateur d'événement et ainsi de suite ..., d'autant que tu refais un autre appel à cette fonction dans ton if, il est donc normal qu'il y ait duplication de code.

[cmoimoly]

Merci NoSmoking pour cette explication, je n'avais pas bien saisi le fonctionnement/déroulement de ce code.

Niveau intégration de mes balises html, je les ai donc supprimé de mydata.innerHTML et je les ai intégrées lorsque le message donné est reçu.