buttons.onclick = function (e) {
var clicks = 0;
clicks++;
Все дело в том, что вы не сохраняете состояние. Каждый раз при нажатии на кнопку, у вас обнуляется счетчик и он же повышается на +1. Простой путь это проверить - поставить так var clicks = 0;debugger;
и вы увидите, что после нажатия кнопки у вас clicks
всегда равен 0.
Решение простое - вам нужно вынести объявление clicks вне функции нажатия. Однако у вас тогда будет один счетчик на все кнопки. Можно сохранить значение clicks для каждой кнопки отдельно в самом html например (не самый лучший вариант).
UPD
Посмотрел внимательней и обнаружил кое-что.
1) Смотрим тут по поводу querySelector, а именно на деталь, что он вернет только первый элемент.
2) Во вторых - почему у вас buttons это вдруг оказался <ul class="list" id="list">
?? Это абсолютно неверно т.к. нажимая куда угодно мы получаем вызов функции ( не только на кнопку). Ваша переменная вводит в заблуждение. Если вы хотите обрабатывать кнопки, то повесьте на них класс и ищите с помощью селектора классов .someClass
тык.
3) Вот накидал по шустрому (тапками не бить плз). Используя замыкание, мы получаем на каждой кнопке свой счетчик.
function makeCounter() {
var currentCount = 1;
return function() {
return currentCount++;
};
};
var buttons = document.getElementsByClassName('ss1');
var clicker = function(e) {
var value = this.counter();
console.log(this.defaultValue + " - " + value);
};
for (var i = 0; i < buttons.length; i++) {
buttons[i].counter = makeCounter();
buttons[i].onclick = function(e) {
clicker.apply(this);
};
}
<div> <input type="button" id="1" class="ss1" text="s" value="haha"> </div>
<div> <input type="button" id="2" class="ss1" value="haha1"> </div>