Estoy haciendo una barra de progreso para mi aplicación de música. Quiero hacer que el indicador de progreso aparezca cada vez que el usuario pase el cursor sobre el contenedor de la barra de progreso. Pero me enfrento a este error: TypeError no capturado: no se pueden establecer propiedades de indefinido (configurando 'display')
Mi 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"; }Mi 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>mi 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 devuelve una matriz.
Entonces document.getElementsByClassName('rhap_progress-indicator') también necesita seleccionar un índice de la matriz:
document.getElementsByClassName('rhap_progress-indicator')[0] .
La alternativa es usar document.querySelector('.rhap_progress-indicator') , que devuelve el elemento si existe.
necesita seleccionar el índice de la lista de nodos cuando usa getElementsByClassName
esto te funcionaria:
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"; }