fixes

script.js

@@ -40,109 +40,92 @@ let messages = [
     "XAOSHammer",
     "Kino Konformist" ];
   
-  const chatwin = document.getElementById("chatwin");
-  const anchor = document.getElementById("anchor");
-  
-  function randomMessage() {
+const chatwin = document.getElementById("chatwin");
+
+function randomMessage() {
     return messages[(Math.random() * messages.length) | 0];
-  }
-  function randomNick() {
+}
+
+function randomNick() {
     return nicks[(Math.random() * nicks.length) | 0];
-  }
-  
-  function randomChat() { if (Math.random() * 2 > 1) {return "tg"} else { return "yt" } }
-  
-  function goDown() {
-    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-  }
-  
-  function removeElementsByClass(className){
-      const elements = document.getElementsByClassName(className);
-      while(elements.length > 15){
-          elements[0].parentNode.removeChild(elements[0]);
-      }
-  }
-  
-  function createChatLine() {
-    
+}
+
+function randomChat() {
+    return Math.random() > 0.5 ? "tg" : "yt";
+}
+
+function scrollToBottom() {
+    chatwin.scrollTop = chatwin.scrollHeight;
+}
+
+function removeOldMessages() {
+    const children = Array.from(chatwin.children);
+    while (children.length > 15) {
+        chatwin.removeChild(children[0]);
+    }
+}
+
+function createChatLine() {
     const nm = document.createElement("div");
     nm.className = "nameline " + randomChat();
-    nm.innerHTML = randomNick();
-    
+    nm.textContent = randomNick();
+
     const msg = document.createElement("div");
     msg.className = "msgline";
-    msg.innerHTML = randomMessage();
-    
+    msg.textContent = randomMessage();
+
     const rw = document.createElement("div");
     rw.className = "chatRow";
     rw.appendChild(nm);
     rw.appendChild(msg);
-    console.log(rw);
-    
-    chatwin.insertBefore(rw, anchor);
-    
-    
-    goDown();
-  }
-  
 
-  function createNewLine(json) {
-    
-  json.forEach(element => {
-    
-    //checking new IDs on screen and print
+    chatwin.appendChild(rw);
+    scrollToBottom();
+    removeOldMessages();
+}
 
-    //const elements = document.getElementsByName(element["id"]);
-    //if (elements.length > 0) {    //if this id is present on screen
-        
-  let curline = document.getElementById(element["id"])
-  if (curline) {
-    curline.innerHTML = element["msg"]
-    return;
-    };  //Updating text...
-          
-    const nm = document.createElement("div");
-    nm.className = "nameline " + element["type"];
-    nm.innerHTML = element["sendr"];
-    if (element["type"] == "donate") { nm.innerHTML =  nm.innerHTML + '<br><p style="color: red">' + element['amount']+"</p>" }
-    
-    const msg = document.createElement("div");
-    msg.className = "msgline";
-    msg.innerHTML = element["msg"];
-    msg.setAttribute("id", element["id"]);
-    if (element["type"] == "donate") { msg.style="background-color: #0000FF20"  }
+function createNewLine(json) {
+    json.forEach(element => {
+        const existing = document.getElementById(element.id);
+        if (existing) {
+            existing.querySelector('.msgline').textContent = element.msg;
+            return;
+        }
 
-    
-    const rw = document.createElement("div");
-    rw.className = "chatRow";
-    rw.setAttribute("name", element["id"]);
-    
-    rw.appendChild(nm);
-    rw.appendChild(msg);
-    //console.log(rw);
-    
-    chatwin.insertBefore(rw, anchor);
+        const nm = document.createElement("div");
+        nm.className = "nameline " + element.type;
+        nm.textContent = element.sendr;
 
+        if (element.type === "donate") {
+            nm.innerHTML += `<br><p style="color: red">${element.amount}</p>`;
+        }
 
-  });
+        const msg = document.createElement("div");
+        msg.className = "msgline";
+        msg.textContent = element.msg;
+        msg.id = element.id;
 
+        if (element.type === "donate") {
+            msg.style.backgroundColor = "#0000FF20";
+        }
 
+        const rw = document.createElement("div");
+        rw.className = "chatRow";
+        rw.appendChild(nm);
+        rw.appendChild(msg);
 
+        chatwin.appendChild(rw);
+        scrollToBottom();
+        removeOldMessages();
+    });
 }
 
 function requestNewLines() {
-
-  var request = new XMLHttpRequest();
-  request.open('GET', "http://localhost:8008/");
-  request.responseType = 'json';
-  request.send();
-
-  request.onload = function() {
-    var chatJSON = request.response;
-    createNewLine(chatJSON);
-    goDown();
-  }
-
+    fetch("http://localhost:8008/")
+        .then(response => response.json())
+        .then(data => createNewLine(data))
+        .catch(error => console.error('Ошибка:', error));
 }
-  
-  setInterval(requestNewLines,1000);
+
+setInterval(requestNewLines, 1000);
+// setInterval(createChatLine, 3000);