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.