Почему не применяются стили для блоков через querySelectorAll?

Question

Объясните пожалуйста, почему во время применения querySelectorAll стили не задаются для блоков? но если задать querySelector, то нужный стиль применяется для нужного блока.

Логика такая: по нажатию на button должен появляться блок. По умолчанию у блоков стоит display: none, по нажатию на button должно меняться на display: Block

let showMsg = document.querySelectorAll('.msg-1 .msg-2 .msg-3');


function viewMsg() {
    showMsg.style.display = 'block';
}

.msg-1 {
    display: none;
}

.msg-2 {
    display: none;
}

.msg-3 {
    display: none;
}

<div class="chat-ui">
    <div class="chat-items">
        <div class="msg">
            <p>первый этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-1">
            <p>второй этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-2">
            <p>конец</p>
            <button value="Click" onmousedown="viewMsg()">отправить</button>
        </div>
        <div class="msg msg-3">
            <p>полный конец</p>
        </div>
    </div>

</div>

Answer 1

У вас две ошибки. Во-первых, вы неправильно написали selector: .msg-1 .msg-2 .msg-3. В таком виде ничего не найдет, так как будет искать .msg-3 внутри .msg-2 внутри .msg-1.

Во-вторых, querySelectorAll возвращает коллекцию элементов. Можно применить стили для каждого элемента по отдельности

let showMsg = document.querySelectorAll('.msg-1, .msg-2, .msg-3');


function viewMsg() {
    showMsg.forEach(el => el.style.display = 'block');
}

.msg-1 {
    display: none;
}

.msg-2 {
    display: none;
}

.msg-3 {
    display: none;
}

<div class="chat-ui">
    <div class="chat-items">
        <div class="msg">
            <p>первый этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-1">
            <p>второй этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-2">
            <p>конец</p>
            <button value="Click" onmousedown="viewMsg()">отправить</button>
        </div>
        <div class="msg msg-3">
            <p>полный конец</p>
        </div>
    </div>

</div>

Answer 2

Document.querySelectorAll возвращает NodeList (массив), в свою очередь Document.querySelector возвращает Element (один элемент).

Для применения стилей ко всем элементам из NodeList необходимо сделать обход циклом и назначить свойство каждому элементу:

for (let i = 0; i < showMsg.length; i++) {
   let msg = showMsg[i];
   msg.style.display = 'block';
}

БЛОГ НА HUSL

Почему не применяются стили для блоков через querySelectorAll?

Ответы (2 шт):