Javascript-форум - getElementsByClassName не срабатывает на clicks

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - getElementsByClassName не срабатывает на clicks (https://javascript.ru/forum/misc/63993-getelementsbyclassname-ne-srabatyvaet-na-clicks.html)

getElementsByClassName не срабатывает на clicks

Добрый день уважаемые. Вот столкнулся с недопониманием работы метода getElementsByClassName. Может кто объяснить где я косячу ? https://jsfiddle.net/BlackStar1991/3xe1fp9r/
Если работать через идентификаторы всё работает, а вот через классы оно не срабатывает.

Black_Star,
нужен цикл по всему списку элементов

Цитата:

Сообщение от Black_Star

Elements

https://jsfiddle.net/BlackStar1991/3xe1fp9r/3/
Тоесть что бы назначить на каждый элемент класса некое действие по средством нажатия кнопки мыши, надо пилить цикл ? :-?

var buttonClick = document.getElementsByClassName('Buttons');
  buttonClick.onclick = function() 
  { for (i=0; i< buttonClick.length; i++) 
        alert("OK class");
  };

Black_Star,
да нужен цикл. пока тот же бред в коде.

Black_Star,

var buttonClick = document.getElementsByClassName('Buttons');
/* можно так */
   for (i=0; i< buttonClick.length; i++)
   buttonClick[i].onclick = function()
  {     alert("OK class");
  };
/* а лучше так */
[].slice.call(buttonClick).forEach(function(item) {
        item.addEventListener('click', function() {
           alert("OK class");
        });
    });
/* или так */
[].forEach.call(document.querySelectorAll('.Buttons'), function(item) {
        item.addEventListener('click', function() {
           alert("OK class");
        });
    });

HTMLCollection.prototype.addEventListener = function() {
    for(var i = 0; i < this.length; i++) {
        Element.prototype.addEventListener.apply(this[i], Array.prototype.slice.call(arguments));
    }
};

document.getElementsByClassName('foo').addEventListener('click', function() {
   alert('Click on div.foo');
});


document.getElementsByClassName('bar').addEventListener('click', function() {
   alert('Click on div.bar');
});

Но лучший вариант - делегировать событие!

Цитата:

Сообщение от рони (Сообщение 421955)

рони,

var buttonClick = document.getElementsByClassName('Buttons');
/* можно так */
   for (i=0; i< buttonClick.length; i++)
   buttonClick[i].onclick = function()
  {     alert("OK class");
  };
/* а лучше так */
[].slice.call(buttonClick).forEach(function(item) {
        item.addEventListener('click', function() {
           alert("OK class");
        });
    });
/* или так */
[].forEach.call(document.querySelectorAll('.Buttons'), function(item) {
        item.addEventListener('click', function() {
           alert("OK class");
        });
    });

Спасибо всё сработало.

Цитата:

Сообщение от Ruslan_xDD (Сообщение 421971)

HTMLCollection.prototype.addEventListener = function() {
    for(var i = 0; i < this.length; i++) {
        Element.prototype.addEventListener.apply(this[i], Array.prototype.slice.call(arguments));
    }
};

document.getElementsByClassName('foo').addEventListener('click', function() {
   alert('Click on div.foo');
});


document.getElementsByClassName('bar').addEventListener('click', function() {
   alert('Click on div.bar');
});

Но лучший вариант - делегировать событие!

Пишет что document.getElementsByClassName(...).addEventListe ner is not a function. А что подразумевается под делегировать событие, и чем это лучше ?

Большое спасибо за советы.
Ещё вопросик, а как реализовать событие (проказа/спрятывания) по клику. Вот к примеру
https://jsfiddle.net/3xe1fp9r/5/
У меня по клику на объект отображаются (меняется стиль) у всех классов, а как сделать привязку к конкретному (вложеному классу) - 1)По нажатию на красный квадрат отображались только красный круг который в него вложен)
2)Ну и ещё задам вопрос как по второму нажатию на объект этот встроенный класс прятать ?

Black_Star,
пока помедитируйте над .classList.toggle

Black_Star,

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <style type="text/css">
        #element1 {
        width: 150px;
        height: 150px;
        margin: 10px;
        background-color: red;
        display: block;
    }

    #element2 {
        width: 150px;
        height: 150px;
        margin: 10px;
        background-color: green;
    }


    .redCircle{
        width: 50px;
    height: 50px;
    border: 1px solid white;
    border-radius: 50%;
    background-color: red;
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
    color:white;
    display: none;
}

    .greenCircle {
    width: 50px;
    height: 50px;
     border: 1px solid white;
    border-radius: 50%;
    background-color: green;
    text-align: center;
    vertical-align: middle;
    font-size: 1.5em;
    color:white;
}

.Buttons.active .redCircle {
  display: block;
}

  </style>

  <title></title>
<script>
window.onload=function(){

var buttonClick = document.getElementsByClassName('Buttons');
var redCircle = document.getElementsByClassName('redCircle');
var greenCircle = document.getElementsByClassName('greenCircle');
// Реализация событий по клику мышки

    for (var i=0; i< buttonClick.length; i++){
    buttonClick[i].onclick= function() {
        this.classList.toggle("active")
    };


}
}//]]>

</script>


</head>

<body>

 <div class="Buttons">
    <div id="element1">
        Button1

            <div class="redCircle">1</div>
            <div class="greenCircle">2</div>

    </div>

</div>
<div class="Buttons">
    <div id="element2">
        Button2

            <div class="redCircle">3</div>
            <div class="greenCircle">4</div>


    </div>
</div>



</body>

</html>