getElementById на getElementsByClassName
 

Доброго дня.
Есть такой скрипт:

<script>
			(function() {
				var bttn = document.getElementById( 'notification-trigger' );

				// make sure..
				bttn.disabled = false;

				bttn.addEventListener( 'click', function() {
					// simulate loading (for demo purposes only)
					classie.add( bttn, 'active' );
					setTimeout( function() {

						classie.remove( bttn, 'active' );
						
						// create the notification
						var notification = new NotificationFx({
							message : '<span class="icon icon-megaphone"></span><p>You have some interesting news in your inbox. Go <a href="#">check it out</a> now.</p>',
							layout : 'bar',
							effect : 'slidetop',
							type : 'notice', // notice, warning or error
							onClose : function() {
								bttn.disabled = false;
							}
						});

						// show the notification
						notification.show();

					}, 1200 );
					
					// disable the button (for demo purposes only)
					this.disabled = true;
				} );
			})();
		</script>

И кнопка, которая его вызывает:

<button id="notification-trigger" class="progress-button">
						<span class="content">Show Notification</span>
						<span class="progress"></span>
					</button>

Я хочу сделать несколько таких кнопок на странице, чтобы при клике срабатывал один и тот же скрипт.
Обычная подмена

var bttn = document.getElementById( 'notification-trigger' );

на

var bttn = document.getElementsByClassName( 'progress-button' );

не сработала. Почему-то скрипт перестает работать в этом случае.
Я не понимаю в JavaScript, поэтому, возможно, не вижу каких-то очевидных вещей. Просьба помочь. Благодарю.

condpattern, потому что bttn стал массивом

Как быть?
Вот демо моего скрипта http://tympanus.net/Development/Noti...-slidetop.html
Там есть кнопка. Мне нужно сделать таких кнопок 2+, но чтобы они все отрабатывали одинаково.
Может я не прав, но по идее здесь не нужно переписывать целиком скрипт, просто что-то подправить. Но как я уже говорил, я, увы, с JavaScript даже не на Вы.

1. Получаешь все кнопки (document.getElementsByClassName, document.querySelectorAll)
2. Идешь по всем кнопкам (for) и навешиваешь на каждую событие и его обработчик (у тебя это уже есть в коде).

Сообразил. Благодарю.

condpattern,

(function() {
	var bttn = document.getElementsByClassName('progress-button');
	for (var i = 0; i < bttn.length; i++) {
		(function(k) {
			// make sure..
			bttn[k].disabled = false;
			bttn[k].addEventListener('click', function() {
				// simulate loading (for demo purposes only)
				classie.add(bttn[k], 'active');
				setTimeout(function() {
					classie.remove(bttn[k], 'active');
					// create the notification
					var notification = new NotificationFx({
						message: '<span class="icon icon-megaphone"></span><p>You have some interesting news in your inbox. Go <a href="#">check it out</a> now.</p>',
						layout: 'bar',
						effect: 'slidetop',
						type: 'notice', // notice, warning or error
						onClose: function() {
							bttn[k].disabled = false;
						}
					});
					// show the notification
					notification.show();
				}, 1200);
				// disable the button (for demo purposes only)
				this.disabled = true;
			});
		})(i);
	}
})();

Работает. Благодарю за помощь.