Wie wähle ich eine Liste der Namen aus und steuert die Anzeige eines DIV? ⇐ JavaScript

[Anonymous]

Ich habe eine Liste von Namen (UL, Li -Elementen) und eine versteckte DIV oben
Wenn ein Name angeklickt wird (ausgewählt), sollte sich die Hintergrundfarbe des Namens ändern und der Div auf dem oberen Anzeigeblock. Nur wenn alle Namen abgewählt werden, zeigt das Div keine an.

Code: Select all

const usersListItems = document.querySelectorAll(".users__list-item");
const myDiv = document.querySelector(".mydiv");
usersListItems.forEach((usersListItem) => {
usersListItem.addEventListener("click", () => {
usersListItem.classList.toggle("selected");
if (usersListItem.classList.contains("selected")) {
myDiv.classList.remove("hide");
} else {
myDiv.classList.add("hide");
}
});
});< /code>
.mydiv {
width: 100%;
height: 50px;
border: 1px solid;
}

.hide {
display: none;
}

.users__list-item,
.no-users {
list-style: none;
padding: 0.5em;
background: #ddd;
margin: 0.5em;
}

.selected {
background: dodgerblue;
color: white;
}< /code>






List Selection





[list]
[*]No users
[*]User 1
[*]User 2
[*]User 3
[*]User 4
[*]User 5
[*]User 6
[*]User 7
[/list]