Get a specific element within forEach loop

Question

I have a list of select elements inside a forEach loop and want only the first element which is at index 0.

This element will have a different method, I'm trying to prevent a repetitive code i don't want to create another method just for this single element, I've tried to figure it out but it seems i'm not successful.

var listOfSelect = document.querySelectorAll('select');

listOfSelect.forEach(function(element) {
  element.addEventListener('focus', function () {
      element.style.backgroundColor = "white";
  });
  element.addEventListener('blur', function () {
      element.style.backgroundColor = "#F0F0E7";
  });

  element.addEventListener('change', function () { // I would want to get the first element here 
    // 
  });
});

Possible duplicate of [Javascript forEach() through an array: how to get the previous and next item?](https://stackoverflow.com/questions/38696860/javascript-foreach-through-an-array-how-to-get-the-previous-and-next-item) — Prashant Pimpale, Jul 27 '19 at 11:54
Possible duplicate of [Get loop counter/index using for…of syntax in JavaScript](https://stackoverflow.com/questions/10179815/get-loop-counter-index-using-for-of-syntax-in-javascript) — Prashant Pimpale, Jul 27 '19 at 11:56

score 3 · Accepted Answer · answered Jul 27 '19 at 11:52

You can access the index as second parameter of forEach method, such as below

var listOfSelect = document.querySelectorAll('select');

listOfSelect.forEach(function(element, index) {
 ...

  element.addEventListener('change', function () { 
    // I would want to get the first element here 
    if (index === 0) {
      console.log('hi')
    }
  });
});

score 1 · Answer 2 · edited Jul 29 '19 at 04:41

forEach has following syntax

nodeList.forEach(callback(currentValue [, index [, array]])[, thisArg]);

So you can use

var listOfSelect = document.querySelectorAll('select');

listOfSelect.forEach(function(element,index,array) {
  element.addEventListener('focus', function () {
      element.style.backgroundColor = "white";
  });
  element.addEventListener('blur', function () {
      element.style.backgroundColor = "#F0F0E7";
  });

  element.addEventListener('change', function () { 
      console.log(array[0])
  });
});

Get a specific element within forEach loop

2 Answers2

Linked