Uncaught TypeError: Cannot set properties of undefined (setting 'display')-CodePudding

I'm making a progress bar for my music react-app. I want to make the progress-indicator to show up whenever the user hover on the progress-bar-container. But I face with this error: Uncaught TypeError: Cannot set properties of undefined (setting 'display')

My Javascript:

document.getElementsByClassName('rhap_progress-container')[0].onmouseover = function(){
  document.getElementsByClassName('rhap_progress-indicator').style.display = "block";
}
document.getElementsByClassName('rhap_progress-container')[0].onmouseout = function(){
  document.getElementsByClassName('rhap_progress-indicator').style.display = "none";
}

My html:

<div  aria-label="Audio progress control" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="24.67" tabindex="0">
  <div >
    <div  style="left: 24.67%;"></div>
    <div  style="width: 24.67%;"></div>
  </div>
</div>

My css:

.rhap_progress-indicator {
  display: none;
  width: 18px !important;
  height: 18px !important;
  border: 3px solid #232530;
  top: -7 px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  content: url('./img/outlined-progress-indicator.png');
}

CodePudding user response：

you need to select index of node list when you use getElementsByClassName

this would work for you:


let Container = document.getElementsByClassName('rhap_progress-container');
let Indicator = document.getElementsByClassName('rhap_progress-indicator');

Container[0].onmouseover = function(){
  Indicator[0].style.display = "block";
}
Container[0].onmouseout = function(){
  Indicator[0].style.display = "none";
}

CodePudding user response：

document.getElementsByClassName returns an array.

So document.getElementsByClassName('rhap_progress-indicator') needs to also select an index of the array:

document.getElementsByClassName('rhap_progress-indicator')[0].

The alternative is to use document.querySelector('.rhap_progress-indicator'), which returns the element if it exists.