Как настроить событие click click в javascript

Question

Как настроить таргетинг на событие click, чтобы я мог повторно использовать .js-box в разных div без использования других контейнеров div?

var box = document.querySelector('.js-box'), 
    colors = ['green', 'blue', 'red']; 

box.onclick = function() { 
    color = colors.shift(); 
    colors.push(color); 

    box.className = 'js-box' + ' ' + color; 
}; 

Я совершенно уверен, что мое решение сделать с правильным использованием «это», но я могу получить мою голову вокруг него

http://jsfiddle.net/Grundizer/ky1tb3r5/

Answer 1

document.querySelector выбирает только первый элемент , не все!

Вот почему вам нужно document.getElementsByClassName

var boxes = document.getElementsByClassName('js-box'), 
 
    colors = ['green', 'blue', 'red']; 
 

 

 

 
for (var i = 0; i < boxes.length; i++) 
 
{ 
 
    boxes[i].onclick = function() { 
 
     color = colors.shift(); 
 
     colors.push(color); 
 
     
 
     this.className = 'js-box' + ' ' + color; 
 
    }; 
 
}

.js-box { 
 
    width:200px; 
 
    height:200px; 
 
    margin:50px; 
 
    border:thin grey solid; 
 
    display:block; 
 
} 
 
.red { 
 
    background-color:red; 
 
} 
 
.blue { 
 
    background-color:blue; 
 
} 
 
.green { 
 
    background-color:green; 
 
}

<div class="js-box"></div> 
 
<div class="js-box"></div>