JavaScript all elements with same class wont get display none

css, javascript

Solution

You have to iterate over them and set the style individually.

function perfumes($id) {
  var elems = document.getElementsByClassName('perfumeDetails');
  for (i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none';
    elems[i].style.top = '100%';
  }
  document.getElementById($id).style.display = 'block';
  document.getElementById($id).style.top = '50%';
}

Problem

I have function in JavaScript. I want to use it for hiding all elements with same class, but it doesn't work . ``` function perfumes($id) { document.getElementsByClassName("perfumeDetails").style.display = "none"; document.getElementsByClassName("perfumeDetails").style.top = "100%"; document.getElementById($id).style.display = "block"; document.getElementById($id).style.top = "50%"; } ``` Inspect element Error : Uncaught TypeError: Cannot set property display of undefined in css , I have `.perfumeDetails{display:none;}` . Can You Help Me out please?

Original source