Soy nuevo en javascript y estoy tratando de pasar el mouse sobre un navegador para que cambie el color de la barra de navegación a verde. Codifiqué lo que pensé que funcionaría, pero no pasa nada. La longitud total de toda la página html es enorme, por lo que solo estoy agregando el código que creo que afecta el mouseover de navegación. También estoy usando getelementsbyclass[2] porque es el tercer elemento con la clase.
<nav class="group" onmouseover="func1()"> <ol> <li><a href="index.html">home</a></li> <li><a href="artists.html">artists</a></li> <li><a href="schedule.html">schedule</a></li> <li><a href="venuetravel.html">venue/travel</a></li> <li><a href="register.html">register</a></li> </ol> </nav> <script src="_/js/myscript.js"></script> <!--myscript.js--> function func1() { document.getElementsByClassName("group")[2].style.background-color = "green"; }En su código, hay muchos errores. El primer error está en esta línea de myscript.js :
document.getElementsByClassName("group")[2].style.background-color = "green"; No hay una propiedad background-color en JavaScript DOM. En cambio, así es como se verá: backgroundColor . Entonces, ahora myscript.js debería verse así:
function func1() { document.getElementsByClassName("group")[2].style.backgroundColor = "green"; } El segundo problema está en la misma línea, document.getElementsByClassName("group")[2].style.backgroundColor = "green"; . document.getElementsByClassName("group") devolverá una matriz que contiene todos los elementos que tienen la clase de group . En su código HTML, solo un elemento, la etiqueta <nav> tiene esta clase. Dado que la indexación de matrices comienza con 0, no hay ningún elemento document.getElementsByClassName("group")[2] . Solo el primer elemento con el índice de 0 existe en esta matriz. Así que cambia ese índice. Ahora, su código JavaScript debería verse así:
function func1() { document.getElementsByClassName("group")[0].style.backgroundColor = "green"; }En primer lugar, la sintaxis de Javascript será
document.getElementsByClassName("group")[0].style.backgroundColor = "green"Y con el código que proporcionó, acabo de cambiar ("grupo")[3] a ("grupo")[0] y simplemente funciona.