Consider a simple JS event of
document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}
How can I extend this code to generally work for all elements with class="test"
. I mean getting the element clicked and replace its content. In fact, we need to get the node number (provided inside the bracket) from the click event.
I am trying to better understand Javascript in unobtrusive codes, not a practical method like jQuery.
Just iterate over them:
var elements = document.getElementsByClassName('test');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', (function(i) {
return function() {
this.innerHTML = 'New Text';
};
})(i), false);
}
I used (function(i) { return function() { ... }; })(i)
instead of just function() { ... }
because if you happen to use i
in the callback, the value of i
will be elements.length - 1
by the time you call it. To fix it, you must shadow i
and make it essentially pass by value.