Кнопка, которая выводит числа в консоль от 1 до n. В зависимости от числа нажатий

219
13 декабря 2017, 21:59

Есть простая html страница с одной кнопкой. При каждом нажатии будет генерироваться список с цифрами. При первом нажатии должна выводится цифра один, при втором два и так далее. Пока я хочу добиться того, чтобы цифры выводились в консоль. Я попробовал разместить обработчик события внутрь цикла. Но в консоль выводятся поcледнее значение цикла. Что я сделал не так?

var b = document.getElementById('button'); 
var c = function() { 
  console.log(i); 
} 
for (var i = 0; i < 10; i++) { 
  b.addEventListener("click", c, false); 
}
<input type="button" name="Button" id="button" value="Click Me">

Answer 1

Здесь цикл не нужен, вообще. Нужна внешняя переменная, которая и будет выводится

var b = document.getElementById('button'); 
var i = 0; 
var c = function() { 
  console.log(i); 
  i++; 
} 
 
b.addEventListener("click", c, false);
<input type="button" name="Button" id="button" value="Click Me">

Answer 2

Можно еще и так...

var btn = document.getElementsByTagName('button')[0]; 
var i = 0; 
btn.addEventListener('click', function() { 
  console.log(i++); 
})
<button>Click Me</button>

READ ALSO
Обновление Google Map каждой секунды
HTML

Обновление Google Map каждой секунды

Есть база даных с координатами автомобиляБаза обновляется каждую секунду

 218
svg mask для лоадера
HTML

svg mask для лоадера

Есть такой интересный лоадер:

 216
Передача данных из формы в mysql
HTML

Передача данных из формы в mysql

Не могу передать данные из html формы в mysqlПодключение - работает

 227
Разница в объявлении JS файла
HTML

Разница в объявлении JS файла

Доброго времени суток ! Почему если объявить JS файл в начале кода html, некоторые функции не работают, а если в конце кода, то работают ? Никогда...

 195