Faire des condictions en js, dans un script de chat Résolu/Fermé

Question

Bonjours, J'ai essaye de faire une condition pour faire un petit truc sympas qui consiste a que quand le message viens de moi il s'affiche à droite et quand il vient d'une autre personne il s'affiche à gauche. Dans mon CSS c'est la class "chat-fleft" qui fait cela mais je ne sais pas comment faire pour introduire cela dans mon code js ? J"ai tenté un petit truc : requeteAjax.onload = function(){ const resultat = JSON.parse(requeteAjax.responseText); const html = resultat.reverse().map(function(message){ if(${message.you} == "coqpix"){ var droite = ''; }else{ var droite = 'chat-left', } return `

${message.message_crea}

${message.date_h}:${message.date_m}

` }).join(''); j'ai mit une condition if pour que quand la colonne de la bdd you !== a coqpix , il y mettent la class css Je pense que cela vient d'un problème d'inscrementation ?

jordane45 · Answer

return `<div class="chat ${droite}">

ScreamFR · Answer

Ok pas de soucis pour l'intégralité du code le voici : code js du chat /** * Codons un chat en HTML/CSS/Javascript avec nos amis PHP et MySQL */ /** * Il nous faut une fonction pour récupérer le JSON des * messages et les afficher correctement */ function getMessages(){ // 1. Elle doit créer une requête AJAX pour se connecter au serveur, et notamment au fichier ../../../../html/ltr/coqpix/php/chat_crea.php const requeteAjax = new XMLHttpRequest(); requeteAjax.open("GET", "../../../../html/ltr/coqpix/php/chat_crea.php"); // 2. Quand elle reçoit les données, il faut qu'elle les traite (en exploitant le JSON) et il faut qu'elle affiche ces données au format HTML requeteAjax.onload = function(){ const resultat = JSON.parse(requeteAjax.responseText); const html = resultat.reverse().map(function(message){ if(${message.you} == "coqpix"){ var droite = ''; }else{ var droite = 'chat-left'; } return `

${message.message_crea}

${message.date_h}:${message.date_m}

` }).join(''); const messages = document.querySelector('.chat-content'); messages.innerHTML = html; messages.scrollTop = messages.scrollHeight; } // 3. On envoie la requête requeteAjax.send(); } /** * Il nous faut une fonction pour envoyer le nouveau * message au serveur et rafraichir les messages */ function postMessage(event){ // 1. Elle doit stoper le submit du formulaire event.preventDefault(); // 2. Elle doit récupérer les données du formulaire const author = document.querySelector('#author'); const content = document.querySelector('#content'); // 3. Elle doit conditionner les données const data = new FormData(); data.append('author', author.value); data.append('content', content.value); // 4. Elle doit configurer une requête ajax en POST et envoyer les données const requeteAjax = new XMLHttpRequest(); requeteAjax.open('POST', '../../../../html/ltr/coqpix/php/chat_crea.php?task=write'); requeteAjax.onload = function(){ content.value = ''; content.focus(); getMessages(); } requeteAjax.send(data); return false; } document.getElementById('btn_submit').addEventListener('click', event => { postMessage(event); }); /** * Il nous faut une intervale qui demande le rafraichissement * des messages toutes les 3 secondes et qui donne * l'illusion du temps réel. */ const interval = window.setInterval(getMessages, 5000); getMessages(); Pour l’éditeur j'utilise VS Code.

Div du chat Concernant les erreurs, il n'y a que celle ci dessus qui est signalé

Faire des condictions en js, dans un script de chat

2 réponses

Discussions similaires