1

При нажатие на смайлик внизу должно выводиться количество кликов по нему но этого не происходит выдает ошибку 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>

2

1 ответ 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>

1
  • 2
    Здравствуйте, можете добавить немного текста с объяснениями для вашего ответа)
    – Miha
    9 фев в 15:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.