Buenas tardes Salvador, he numerado las versiones del código que has planteado.
En la versión 2 indicabas que todavía no te funcionaba.
Voy a tratar de analizar por qué no funciona.
En la línea elemH1 = document.getElementsByTagName('h1'); lo que haces es obtener un array de elementos cuyo tag es h1. Si no hay ningún elemento h1 no obtendrás resultado. Si hay un elemento obtendrás ese elemento en elemH1[0] ya que lo que te devuelve es un array siempre.
Si hay dos elementos obtendrás elemH1[0] y elemH1[1], si hay tres ... etc.
Fíjate que los resultados que obtienes llevan índice (por ser un array).
Al escribir elemH1.onmouseover = function () {elemH1.style.color = 'orange'; } estás escribiendo elemH1 sin índice. Pero eso no es un nodo resultado, por tanto no puedes utilizar la propiedad onmouseover.
Con este código:
for (var i = 0; i < elemH.length; i++) {
elemH[i].onmouseover = function () {return this.style.color = "orange";}
elemH[i].onmouseout = function() {return this.style.color = "brown";}
}
Usamos un bucle for para decirle: a cada uno de los elementos del resultado obtenido (que tendremos en un array) aplícales el manejo de eventos de forma que ante onmouseover cambien a color naranja, y ante onmouseout cambien a color marrón.
¿Por qué usamos un bucle? Porque estamos trabajando con el resultado obtenido con getElementsByTagName que es siempre un array de elementos (incluso aunque sea un array con un solo elemento).
Siempre que uses funciones JavaScript tienes que tener en cuenta qué es lo que te devuelve (qué tipo de objeto, si es un array o no , etc.)
Saludos.
Tema: Eventos Javascript cambiar color de texto al pasar el ratón por encima CU01157E (Leído 9548 veces)
RSS -
WAP2