Почему не работает счётчик кликов?

Question

Почему не работает счётчик кликов?

Рейтинг: 1Ответов: 1Опубликовано: 09.02.2023

При нажатие на смайлик внизу должно выводиться количество кликов по нему но этого не происходит выдает ошибку Cannot read properties of null (reading 'innerText')

const buttons = document.querySelectorAll('.button');
for (let btn of buttons) {
    btn.addEventListener('click', () => {
        let counter = btn.closest('.count-click');
        counter.innerText = parseInt(counter.innerText) + 1
    });
}

body {
    background-color: darkcyan;
}
.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.list-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    width: 100%;
    margin: 0 auto 30px;
}
.button {
    padding: 0;
    border: 2px solid deepskyblue;
    border-radius: 50%;
    background-color: transparent;
    width: 35px;
    height: 35px;
    cursor: pointer;
    color: snow;
    margin-bottom: 30px;
}

ul {
    padding: 0;
}
li {
    list-style-type: none;
    text-align: center;
}
p {
    margin: 0;
}

<div class="wrapper">
        <ul class="list-buttons" id="listButtons">
            <li><button class="button" id="btn1">&#128512</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn2">&#128515</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn3">&#128516</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn4">&#128513</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn5">&#128518</button>
                <p class="count-click">0</p>
            </li>
        </ul>
    </div>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

const buttons = document.querySelectorAll('.button');
for (let btn of buttons) {
    btn.addEventListener('click', () => {
        let counter = btn.nextElementSibling; // обращаемся к следующему элементу-соседу
        counter.innerText = parseInt(counter.innerText) + 1
    });
}

body {
    background-color: darkcyan;
}
.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.list-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    width: 100%;
    margin: 0 auto 30px;
}
.button {
    padding: 0;
    border: 2px solid deepskyblue;
    border-radius: 50%;
    background-color: transparent;
    width: 35px;
    height: 35px;
    cursor: pointer;
    color: snow;
    margin-bottom: 30px;
}

ul {
    padding: 0;
}
li {
    list-style-type: none;
    text-align: center;
}
p {
    margin: 0;
}

<div class="wrapper">
        <ul class="list-buttons" id="listButtons">
            <li><button class="button" id="btn1">&#128512</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn2">&#128515</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn3">&#128516</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn4">&#128513</button>
                <p class="count-click">0</p>
            </li>
            <li><button class="button" id="btn5">&#128518</button>
                <p class="count-click">0</p>
            </li>
        </ul>
    </div>

Почему не работает счётчик кликов?

Ответы