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 class="rhap_progress-container" aria-label="Audio progress control" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="24.67" tabindex="0">
  <div class="rhap_progress-bar ">
    <div class="rhap_progress-indicator" style="left: 24.67%;"></div>
    <div class="rhap_progress-filled" 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');
}

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 class="rhap_progress-container" aria-label="Audio progress control" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="24.67" tabindex="0">
  <div class="rhap_progress-bar ">
    <div class="rhap_progress-indicator" style="left: 24.67%;"></div>
    <div class="rhap_progress-filled" 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');
}

• javascript
• css
• reactjs

• Notice when you declare the event handler, you realise its an array and thus affix [0] but you don't do this in the event handler itself. – mardubbles Commented Apr 9, 2022 at 11:10
• You missed the index along with the "getElementsByClassName" inside the function block Alternatively, you may add an id and go for "getElementById" document.getElementsByClassName('rhap_progress-indicator')[0].style.display = "block"; – ullas kakanadan Commented Apr 9, 2022 at 11:42

2 Answers 2

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.

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";
}