I am very new to coding. Below is a piece of JS code i am struggling to understand:

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsbyClassName(“btn”);
for (var i = 0; i < btns.length; i++){
btns.addEventListener(“click”, function(){
var current = document.getElementsbyClassName(“active”);
current[0].className = current[0].className.replace(‘active’, “”);
 this.className += ‘active’;
});}

What difference does the [i] make in

btns[i].AddEventListener??

What is it exactly and what if there was no “i” in between the brackets? Also current[0]. It’s probably a stupid question, but please help me understand.

I am very new to coding. Below is a piece of JS code i am struggling to understand:

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsbyClassName(“btn”);
for (var i = 0; i < btns.length; i++){
btns.addEventListener(“click”, function(){
var current = document.getElementsbyClassName(“active”);
current[0].className = current[0].className.replace(‘active’, “”);
 this.className += ‘active’;
});}

What difference does the [i] make in

btns[i].AddEventListener??

What is it exactly and what if there was no “i” in between the brackets? Also current[0]. It’s probably a stupid question, but please help me understand.

• javascript
• addeventlistener

3 Answers 3

First of all there are no stupid question but only stupid answers.

In your code you get a list of DOM elements stored in an array called 'btns', then you iterate it with a loop.

So btns[i] allow you to retrieves the elements at the i position (It's important to note that array start at 0 in Javascript).

Example:

var fruits = ['Apple', 'Banana'];

console.log(fruits[0])
console.log(fruits[1])

So if you don't use the [i] you will iterate on the array itself and not on the element stored in it.

As the name of the method getElementsByClassName suggests, this queries the DOM and returns an array like object that contain multiple elements with the class name that was specified.

btns - will be an array that contains one or more elements.

To access a specific element from the array, you access it using the index of the current iteration.

btns[1] - Gives you access to the 2nd element in the list.

addEventListener - is used to bind a event handler to a single element. You cannot directly use this on array of objects.

// query the DOM for element with id - linkcontainer
var btnContainer = document.getElementbyId(“linkcontainer”);
// query the DOM for elements with className - btn
// This can return multiple elements, so btns will be 
// as array like object of elements
var btns = btnContainer.getElementsByClassName(“btn”);

// iterate over the array that was just queried for
for (var i = 0; i < btns.length; i++) {

  // bind a click event for each element in the array
  btns[i].addEventListener(“click”, function() {
    // query the dom for elements with className - active
    var current = document.getElementsByClassName(“active”);

    // access the first element and replace the active class 
    current[0].className = current[0].className.replace(‘active’, “”);

    // add the active class to the element that was clicked
    this.className += ‘active’;
  });
}

The way I see it you will have to remove the active class for all the elements instead of just the first entity. A slightly better way to improve this code would be is

var btnContainer = document.getElementbyId(“linkcontainer”);
var btns = btnContainer.getElementsByClassName(“btn”);

btns.forEach(function(btn) {
  btn.addEventListener(“click”, function() {
    // query the dom for elements with className - active
    var current = document.getElementsByClassName(“active”);

    current.forEach(function(elem) {
      elem.classList.remove('active');
    });

    this.classList.add('active');
  });
});

As the other posters have mentioned, your code var btns = btnContainer.getElementsbyClassName(“btn”); should return an array of DOM elements so in your for loop, btns[i] will retrieve the specific element at index i of btns as i goes from 0 to btns.length. Removing the i will retrieve the entire array on each iteration.

To your second question: current is exactly the same thing as btns, an array of DOM elements so current[0] will retrieve the first element in this array.