Добавление класса в div с помощью функции onclick

Question

Я попытался найти способ решить мою проблему, чтобы добавить класс в div, когда я нажимаю на них, но я не могу заставить его работать.

var el = document.getElementsByClassName('applications'); 
var i; 
for (i = 0; i < el.length; i++) { 
    el[i].addEventListener("click", function() { 
    if (el[i]) { 
     el[i].className += el[i].className ? ' openDiv' : 'openDiv'; 
    } 
    }); 
} 

У меня есть «цикл», потому что я использовал getElementsByClassName, который дает список узлов. Я также создал codepen пример:

http://codepen.io/anon/pen/dGqmMy

Answer 1

Вместо того чтобы использовать сложные манипуляции строки, используйте classList:

el[i].classList.add('openDiv'); 

Я считаю, что вам может понадобиться добавить закрытие для eventListeners работать.

Таким образом, это будет рассматриваться как решение:

var el = document.getElementsByClassName('applications'); 
var i; 
for (i = 0; i < el.length; i++) { 
    (function (i) { 
    el[i].addEventListener("click", function() { 
     if (el[i]) { 
     el[i].classList.add('openDiv'); 
     } 
    }); 
    })(i); 
}