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? — Prashant Pimpale
– Prashant Pimpale, Commented Jul 27, 2019 at 11:54
Possible duplicate of Get loop counter/index using for…of syntax in JavaScript — Prashant Pimpale
– Prashant Pimpale, Commented Jul 27, 2019 at 11:56

Isaac · Accepted Answer · 2019-07-27 11:52:18Z

3

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')
    }
  });
});

answered Jul 27, 2019 at 11:52

Isaac

13k18 gold badges66 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adiga · Accepted Answer · 2019-07-29 04:41:00Z

1

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])
  });
});

edited Jul 29, 2019 at 4:41

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jul 27, 2019 at 11:52

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

Get a specific element within forEach loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related