Консоль выдает ошибку "Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLButtonElement.btn.onclick"

Question

При нажатии на кнопку "Подробнее" под карточкой должен появляться текст, при повторном нажатии - исчезать. Не могу понять, почему выдает ошибку

Собственно код:

const btns = document.querySelectorAll('.lecture-record');
for (let btn of btns) {
    
    btn.onclick = () => {
        
        const text = btn.parentElement.querySelector('.lecture-description');
        
        text.style.display = (text.style.display === 'none') ? 'block' : 'none'; (ВОТ НА ЭТОЙ СТРОКЕ ПОКАЗЫВАЕТ ОШИБКУ)
    }
};

Код html:

<!doctype html>
<html lang=ru>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="events.css">
    <title>Frontend. Graduation work</title>
    <base target="_blank">
</head>
<body>
    <div class="container lecture">
        <div class="lecture-card color">
            <span class="lecture-day">05</span>
            <div>
                <p class="lecture-name month">Декабря</p>
                <p class="lecture-data">11:00-12:00</p>
            </div>
            <div>
                <p class="lecture-name page-events">Самая обаятельная и привлекательная</p>
                <p class="lecture-data">Лекция</p>
            </div>
            <button class="lecture-record">Подробнее</button>
            <button class="lecture-record red"><a href="https://clck.ru/ZEyfL">Записаться</a></button>
        </div>
        <span class="lecture-description">Описание курса: текст текст текст текст</span>
    </div>
    
    <script src="events.js"></script>
</body>
</html>

код стиля в css:

.lecture-description {
    display: none;
    position: relative;
    font-size: 14px;
}

Answer 1

Потому что btn.parentElement это <div class="lecture-card color">…</div> а document.querySelector возвращает ссылку на объект типа Element, являющийся первым элементом в документе, который соответствует указанному набору CSS селекторов, либо null, если совпадений нет. В вашем случае возвращает null

const btns = document.querySelectorAll('.lecture-record:not(.red)');

btns.forEach((e,i)=>{
  let desc = document.querySelectorAll('.lecture-description')[i];
  e.onclick = () => {
    let disp = window.getComputedStyle(desc).display
    desc.style.display = disp === 'none' ? 'block' : 'none';
    btns[i].innerHTML = btns[i].innerHTML == "Подробнее" ? "Скрыть" : "Подробнее" 
  }
});

.lecture-description {
    margin-top: 30px;
    margin-bottom: 30px;
    
    display: none;
    position: relative;
    font-size: 14px;
}

<!doctype html>
<html lang=ru>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" type="text/css" href="events.css">
    <title>Frontend. Graduation work</title>
    <base target="_blank">
</head>
<body>
    <div class="container lecture">
        <div class="lecture-card color">
            <span class="lecture-day">05</span>
            <div>
                <p class="lecture-name month">Декабря</p>
                <p class="lecture-data">11:00-12:00</p>
            </div>
            <div>
                <p class="lecture-name page-events">Самая обаятельная и привлекательная</p>
                <p class="lecture-data">Лекция</p>
            </div>
            <button class="lecture-record">Подробнее</button>
            <button class="lecture-record red"><a href="https://clck.ru/ZEyfL">Записаться</a></button>
        </div>
        <span class="lecture-description">Описание курса: текст текст текст текст</span>
    </div>
    
    <div class="container lecture">
        <div class="lecture-card color">
            <span class="lecture-day">06</span>
            <div>
                <p class="lecture-name month">Январь</p>
                <p class="lecture-data">8:00-9:00</p>
            </div>
            <div>
                <p class="lecture-name page-events">Самая обаятельная и привлекательная</p>
                <p class="lecture-data">Лекция</p>
            </div>
            <button class="lecture-record">Подробнее</button>
            <button class="lecture-record red"><a href="https://clck.ru/ZEyfL">Записаться</a></button>
        </div>
        <span class="lecture-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
    
    <script src="events.js"></script>
</body>
</html>

БЛОГ НА HUSL

Консоль выдает ошибку "Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLButtonElement.btn.onclick"

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