JavaScript all elements with same class wont get display none

Question

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?

Answer 1

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