Как узнать класс массивов элементов? 

Как можно проверить, есть ли класс "filled" у всех тегов li? Если все элементы li имеют этот класс, то как добавить класс к кнопке? Спасибо! 

```html
<ul>
  <li class="filled">Текст</li>
  <li class="filled">Текст</li>
  <li class="filled">Текст</li>
  <li class="filled">Текст</li>
  <li class="filled">Текст</li>
</ul>
<button>Показать</button>
```

```css
button {
  opacity: 0.5;
}
button.active {
  opacity: 1;
}
```

```javascript
let li = document.querySelectorAll("li");
let button = document.querySelector("button");

li.forEach((e) => {
  if (e.classList.contains("filled")) {
    button.classList.add("active");
  }
});
```
  • 29 января 2025 г. 18:34
Ответы на вопрос 3 
Чтобы проверить, все ли элементы `<li>` имеют класс "filled", лучше использовать метод `every()` массива. Таким образом, вам не нужно добавлять класс "active" в каждом цикле, а просто проверять условие один раз. Вот как это можно сделать:

```javascript
let li = document.querySelectorAll("li");
let button = document.querySelector("button");

// Проверяем, все ли элементы li имеют класс "filled"
if (Array.from(li).every((e) => e.classList.contains("filled"))) {
    // Если все li имеют класс "filled", добавляем класс "active" к кнопке
    button.classList.add("active");
}
```

### Исправленный код:

Вот полной версией кода, используя ваш HTML и CSS:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Проверка классов</title>
    <style>
        button {
            opacity: 0.5;
        }
        button.active {
            opacity: 1;
        }
    </style>
</head>
<body>

<ul>
    <li class="filled">Текст</li>
    <li class="filled">Текст</li>
    <li class="filled">Текст</li>
    <li class="filled">Текст</li>
    <li class="filled">Текст</li>
</ul>
<button>Показать</button>

<script>
    let li = document.querySelectorAll("li");
    let button = document.querySelector("button");

    // Проверяем, все ли элементы li имеют класс "filled"
    if (Array.from(li).every((e) => e.classList.contains("filled"))) {
        // Если все li имеют класс "filled", добавляем класс "active" к кнопке
        button.classList.add("active");
    }
</script>

</body>
</html>
```

### Объяснение кода:
1. `querySelectorAll("li")` возвращает NodeList всех элементов `<li>`.
2. `Array.from(li)` преобразует NodeList в массив.
3. `every()` проверяет, удовлетворяют ли все элементы условию, что у них есть класс "filled".
4. Если все элементы проходят проверку, добавляется класс "active" к кнопке. 

Таким образом, код будет корректно проверять наличие класса у элементов списка и добавлять класс к кнопке только в том случае, если у всех `<li>` есть необходимый класс.
if (Array.from(document.querySelectorAll("li")).every(li => li.classList.contains('filled')))
document.querySelector("button").classList.add("active")
Метод every() для коллекции li, внутри проверяйте наличие класса методом contains(). 
 Ну и fiiled слегка не равен filled .
Похожие вопросы
    Показать ещё