Comment changer le contenu d'une balise div dynamiquement ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-19 11:27:36

Question

Bonjour à tous et à toutes. Je travaille sur un projet de plateforme couplée à un serveur téléphonique et j'ai un soucis actuellement. Lorsque j'appelle je reçois la notification de l'appel comme appel entrant...764. mais à chaque fois que j'appelle le même message s'affiche et s'ajoute alors que je veux que je message disparait lorsque je raccroche et apparait à nouveau lorsque je rappelle.

Illustration:

appel entrant...764 appel entrant...764 appel entrant...764 .................................. ..................................

Code:

<script>
signalrConnection.on("onMessageReceived", function (eventMessage) {
messageCount++;
var ev = JSON.parse(eventMessage);

const ul = document.getElementById("messages");
const h1 = document.createElement("h1");
for (const property in ev) {
const newDiv = document.createElement("div");
const newContent = document.createTextNode(`appel entrant...: ${ev[property]}`);
newDiv.appendChild(newContent);
h1.appendChild(newDiv);
}
ul.appendChild(h1);
});
</script>

Réponse

Bonjour, à chaque appel de la fonction vous créez une nouvelle balise div avec son contenu, donc c'est normal qu'elles se succèdent.

Si cela est possible, ne pourriez vous pas hard-coder un conteneur que vous préfixez avec un id :

<div id="conteneur"></div>

Dans votre fonction vous avez alors juste à créer la chaine voulue, exemple :

const newContent = "<div>appel entrant...: " + ${ev[property]} + "</div>";

Puis ensuite vous utilisez la propriété Element.innerHTML pour compléter ou remplacer le contenu du conteneur :

const conteneur = document.getElementById("conteneur");
conteneur.innerHTML = newContent; // remplace le contenu du conteneur.
conteneur.innerHTML += newContent; // complète le contenu du conteneur.