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