#javascript #html #function #queryselector
Вопрос:
Я попробовал queryselector, и он выбирает первый элемент. Я также пробовал это с помощью цикла for, но это тоже не сработало, возможно, я делал это неправильно. Кто-нибудь может мне в этом помочь?
<html>
<body>
<div id="list">
<div id="item1" class="bttn">Apple</div>
<div id="item2" class="bttn">Mango</div>
<div id="item3" class="bttn">Banana</div>
<div id="item4" class="bttn">Kiwi</div>
</div>
<style>
.bttn{
display: flex;
cursor: pointer;
}
</style>
<script>
var list = document.querySelectorAll(".bttn");
console.log(list);
list.onclick = function(){
this.style.background = "red";
};
</script>
</body>
</html>
Комментарии:
1. Пожалуйста, поделитесь своим кодом с for Loop. querySelectorAll возвращает коллекцию, которую вам придется прикреплять индивидуально.
Ответ №1:
Вам нужно просмотреть свою коллекцию и применить прослушиватель щелчков к каждому соответствующему элементу, а также получить доступ к этому элементу внутри обработчика с помощью event.target
<script>
var list = document.querySelectorAll(".bttn");
console.log(list);
list.forEach(el => el.addEventListener('click', function(e){
e.target.style.background = "red";
}))
</script>
При желании вы можете абстрагировать функцию прослушивателя
<script>
let list = document.querySelectorAll(".bttn");
const onBttnClick = (e) => {
e.target.style.background = "red";
}
list.forEach(el => el.addEventListener('click', onBttnClick))
</script>
Ответ №2:
Вы добавляете прослушиватель событий onlick в массив элементов Dom. Вы должны выполнить итерацию по массиву и назначить прослушиватель событий каждому элементу.
<html>
<body>
<div id="list">
<div id="item1" class="bttn">Apple</div>
<div id="item2" class="bttn">Mango</div>
<div id="item3" class="bttn">Banana</div>
<div id="item4" class="bttn">Kiwi</div>
</div>
<style>
.bttn{
display: flex;
cursor: pointer;
}
</style>
<script>
var list = document.querySelectorAll(".bttn");
console.log(list);
list.forEach(function(e){
e.addEventListener('click', function(){
this.style.background = "red";
}, false);
});
</script>
</body>
</html>