How to detect which element in a class has a certain style

Question

I have a series of select lists that share a class. They're all on top of each other, and one has display: inline while the others have display: none . How could I use plain JavaScript (no jQuery) to find the list that is showing and retrieve its value ?

I was thinking something like this:

function retrieve() {
  var value
  elements = document.getElementsByClassName('class');
  for (var i = 0; i < elements.length; i++) {
    if(elements[i].style.display = 'inline') {
      value = elements[i].value;
      break;
    }
  }
  alert(value);
}

But the alert says "undefined". What's wrong with the code?

Answer 1

This line:

if(elements[i].style.display = 'inline') {

should be

if(elements[i].style.display === 'inline') {
// change here --------------^

With the single = , it's an assignment , not a comparison. With the === , it's a ( strict ) comparison. You could also use == (a loose comparison ).