При нажатие на смайлик внизу должно выводиться количество кликов по нему но этого не происходит выдает ошибку 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">😀</button>
<p class="count-click">0</p>
</li>
<li><button class="button" id="btn2">😃</button>
<p class="count-click">0</p>
</li>
<li><button class="button" id="btn3">😄</button>
<p class="count-click">0</p>
</li>
<li><button class="button" id="btn4">😁</button>
<p class="count-click">0</p>
</li>
<li><button class="button" id="btn5">😆</button>
<p class="count-click">0</p>
</li>
</ul>
</div>