Mein Chatroom ist voller merkwürdiger Positionen Fehler und Textfehler ⇐ HTML

[Guest]

Ich habe eine Website namens Neochatroom geschrieben, als der Knopf, den ich machte, um einen neuen Raum zu erstellen, wie verrückte Störungen störten. p> Ich habe versucht, die Positionen auf PX zu wechseln, aber es hat das Problem nur verschlechtert, dann habe ich versucht, Github Copilot zu fragen, was zum Teufel, was geschah, aber er gab mir immer wieder den gleichen Code. Ich habe versucht, Variablen zu wechseln, um festzustellen, ob der Raumname fein wie T so angezeigt wird, dass T seit Beginn der . < /p>
(html) index.html: < /p>

Code: Select all

     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;
});


 
< /Code>
(javaScript) webcript.js: < /p>
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; }

Hier ist ein Bild des Fehlers: Das transparente Ding ist die Schaltfläche „Chatroom beitreten“.
Bitte sagen Sie mir, was falsch sein muss.