Мой чат полон странных ошибок в позициях и текстовых ошибок ⇐ Html

[Anonymous]

Я писал веб-сайт под названием NeoChatroom, когда внезапно кнопка, которую я сделал для создания новой комнаты, начала глючить как сумасшедшая, меняя положение, в какой-то момент кнопки начали исчезать, это был хаос.
Я пробовал менять позиции на px, но это только усугубляло проблему, затем я попытался спросить второго пилота github, что, черт возьми, происходит, но он просто продолжал давать мне тот же код. я попробовал переключить переменные, чтобы посмотреть, отобразится ли наконец имя комнаты так, как должно было с самого начала, но оно продолжало показывать «Имя:...», а затем фактическое имя.
пожалуйста, проанализируйте мой код и скажите мне, что не так .
(HTML) index.html:

Код: Выделить всё

     Neo Chatroom  @import url('https://fonts.googleapis.com/css?family=Varela+Round');

body {
margin: 1px;
font-family: 'Varela Round', sans-serif;
transition: background-color 0.3s, color 0.3s;
}

p, h1, h2, h3, li, button {
font-family: 'Varela Round', sans-serif;
}

button {
font-weight: 800;
font-size: larger;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
background-color: #333;
color: white;
}

section {
background-color: rgb(85, 96, 97);
}

input, select {
max-width: 100%;
box-sizing: border-box;
}

.room-info {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
}

.room-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 10px 0;
background-color: #f0f0f0;
border-radius: 8px;
position: relative;
}

.delete-button, .join-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.delete-button {
right: 80px;
}

.join-button {
right: 45px;
}
/* epik themes */
body.DarkPlus {
background-color: #1a1a1a;
color: white;
}

body.modernDark {
background-color: #2c2c2c;
color: white;
}

body.redVibes {
background-color: #880000;
color: white;
}

body.ZeroFarenheit {
background-color: #00f;
color: white;
}

body.contrastLight {
background-color: #f0f0f0;
color: black;
}

body.abyssDark {
background-color: #121212;
color: white;
}

body.matrix {
background-color: #0f0;
color: black;
}

body.solarizedDark {
background-color: #002b36;
color: #839496;
}

body.tomorrowNightBlue {
background-color: #1a1a2e;
color: #a0a0a0;
}

body.aesthetic {
background-color: #f7d2f7;
color: #5a2d5a;
}


  select ur epik theme:   DarkPlus Modern Dark Red Vibes ZeroFarenheit Contrast Light Abyss Dark Matrix Solarized Dark Tomorrow Night Blue Aesthetic  Neo Chatroom Welcome to the Neo Chatroom, here you can:[list] [*]chat and socialize [*]host chatrooms [*]meet new people [*]join chatrooms [/list]  NeoChatroom, since 2025 : ) Room Name:   Privacy:   Public Semi-Private  Private  User Cap:   New Room  
[b]Available Rooms: [/b]
    const ThemeDropDown = document.getElementById('ThemeDropDown');

function changeTheme() {
const selectedTheme = ThemeDropDown.value;
document.body.className = selectedTheme;
}

ThemeDropDown.addEventListener('change', changeTheme);

document.addEventListener('DOMContentLoaded', () => {
const defaultTheme = 'DarkPlus';
document.body.classList.add(defaultTheme);
ThemeDropDown.value = defaultTheme;
});


 

(JavaScript) webscript.js:

Код: Выделить всё

let hasCreatedRoom = false;

const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = function(event) { const data = JSON.parse(event.data); createRoomElement(data, false); };

function newroom() { if (hasCreatedRoom) { alert("You can only create one room."); return; }

const roomName = document.getElementById("roomName").value;
if (!roomName) {
alert("Room name cannot be empty.");
return;
}

const privacy = document.getElementById("privacy").value;
const userCap = document.getElementById("userCap").value;
let roomCode = "";

if (privacy === "semi-private") {
roomCode = generateRoomCode();
}

const roomData = {
width: "100px",
height: "100px",
backgroundColor: "rgb(247, 223, 223)",
margin: "10px",
borderRadius: "10px",
name: roomName,
privacy: privacy,
code: roomCode,
userCap: userCap,
owner: true
};

ws.send(JSON.stringify(roomData));
createRoomElement(roomData, true);
hasCreatedRoom = true;

}

function createRoomElement(data, isOwner) { var newDiv = document.createElement("div"); newDiv.className = "room-container"; newDiv.style.width = data.width; newDiv.style.height = data.height; newDiv.style.backgroundColor = data.backgroundColor; newDiv.style.margin = data.margin; newDiv.style.borderRadius = data.borderRadius;

var roomInfo = document.createElement("p");
roomInfo.className = "room-info";
roomInfo.textContent = `Name: ${data.name}, Privacy: ${data.privacy}, User Cap: ${data.userCap}`;
if (data.privacy === "semi-private" && isOwner) {
roomInfo.textContent += `, Code: ${data.code}`;
}

newDiv.appendChild(roomInfo);

if (isOwner) {
var deleteButton = document.createElement("button");
deleteButton.className = "delete-button";
deleteButton.textContent = "Delete Room";
deleteButton.onclick = function() {
newDiv.remove();
hasCreatedRoom = false;
};
newDiv.appendChild(deleteButton);
}

var joinButton = document.createElement("button");
joinButton.className = "join-button";
joinButton.textContent = "Join Chatroom";
joinButton.onclick = function() {
alert(`Joining room: ${data.name}`);
};
newDiv.appendChild(joinButton);

var roomsSection = document.getElementById("roomssection");
roomsSection.appendChild(newDiv);

}

function generateRoomCode() { const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; let result = ''; for (let i = 0; i < 5; i++) { result += characters.charAt(Math.floor(Math.random() * characters.length)); } return result; }

вот изображение ошибки: прозрачная кнопка — это кнопка присоединения к чату.
пожалуйста, скажите мне, что не так.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -text-bugs