Autor Tema: Eventos Javascript cambiar color de texto al pasar el ratón por encima CU01157E  (Leído 4138 veces)

Salvadoruve2

  • Principiante
  • **
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Hola alguien me puede decir por que no me funciona el código siguiente para el ejercicio propuesto CU01157E del curso básico de desarrollo web con lenguaje JavaScript?

Aqui el ejercicio propuesto:

Citar
a) Mediante el control de los eventos onmouseover y onmouseout, debemos hacer que cuando el usuario pase el ratón sobre las etiquetas h1 y h3, el color del texto pase a ser orange y cuando deje de pasarlo el texto quede en marrón.

aqui mi solución (VERSIÓN 1):

Código: [Seleccionar]
<!DOCTYPE html>

<html> <head><title>Portal web - aprenderaprogramar.com</title>

<meta name="description" content="Portal web aprenderaprogramar.com">

<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">

<script type="text/javascript">

window.onload = function () {

elemH1 = getElementsByTagName('h1');
elemH3 = getElementsByTagName('h3');

elemH1.onmouseover = function () { elemH1[0].style.color = 'orange'; }
elemH3.onmouseover = function() {elemH3[0].style.color = 'orange'; elemH3[1].style.color = 'orange';}

elemH1.onmouseout = function() {elemH1[0].style.color = 'braun';}
elemH13.onmouseout = function() {elemH3[0].style.color = 'braun'; elemH3[1].style.color = 'braun';}
}

//onmouseover y onmouseout naranja y marron
</script>

</head>

 <body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>

<h1>Novedades</h1>

<p>Aquí presentamos las novedades del sitio.</p>

<h3>Lanzamos el producto X-FASHION</h3>

<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3>Mejoramos el producto T-MOTION</h3>

<p>Hemos lanzado una nueva versión del producto T-MOTION</p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</body>
</html>

Querría saber si así (o casi así) se puede resolver el ejercicio o de lo contrario hay que utilizar un bucle.

Gracias
« última modificación: 09 de Agosto 2016, 21:46 de Mario R. Rancel »
Dt. Crane psychiatrist

Salvadoruve2

  • Principiante
  • **
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Re:(CU01157E) Eventos Javascrip. Duda
« Respuesta #1 : 06 de Agosto 2016, 15:06 »
Vale he corregido unos errores que tenía en el código.. aún así sigue sin funcionar.

VERSIÓN 2

Código: [Seleccionar]
<!DOCTYPE html>

<html> <head><title>Portal web - aprenderaprogramar.com</title>

<meta name="description" content="Portal web aprenderaprogramar.com">

<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">

<script type="text/javascript">

window.onload = function () {

elemH1 = document.getElementsByTagName('h1');
elemH3 = document.getElementsByTagName('h3');

elemH1.onmouseover = function () {elemH1.style.color = 'orange'; }
elemH3.onmouseover = function() {elemH3[0].style.color = 'orange'; elemH3[1].style.color = 'orange';}

elemH1.onmouseout = function() {elemH1[0].style.color = 'braun';}
elemH3.onmouseout = function() {elemH3[0].style.color = 'braun'; elemH3[1].style.color = 'braun';}
}

//onmouseover y onmouseout naranja y marron
</script>

</head>

 <body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>

<h1>Novedades</h1>

<p>Aquí presentamos las novedades del sitio.</p>

<h3>Lanzamos el producto X-FASHION</h3>

<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3>Mejoramos el producto T-MOTION</h3>

<p>Hemos lanzado una nueva versión del producto T-MOTION</p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</body>
</html>
« última modificación: 09 de Agosto 2016, 21:37 de Mario R. Rancel »
Dt. Crane psychiatrist

Salvadoruve2

  • Principiante
  • **
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Re:(CU01157E) Eventos Javascrip. Duda
« Respuesta #2 : 06 de Agosto 2016, 21:32 »
Vale despues de mirar en los foros he encontrado una solución casi perfecta al enunciado y despues de estudiarla he resuelto mi ejercicio de la misma manera.

Lo que no tengo muy claro todavía es por que hay que utilizar el bucle for, para realizar las sentencias.. por que no son capaces de ejecutarse sin el bucle. gracias

VERSIÓN 3

Código: [Seleccionar]
<!DOCTYPE html>

<html> <head><title>Portal web - aprenderaprogramar.com</title>

<meta name="description" content="Portal web aprenderaprogramar.com">

<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">

<script type="text/javascript">

window.onload = function () {


elemH = document.querySelectorAll('h1, h3');

elemP = document.querySelectorAll('p');

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

for (var i = 0; i < elemP.length; i++) {
elemP[i].onmouseover = function() {return this.style.backgroundColor = "yellow";}
elemP[i].onmouseout = function(){return this.style.backgroundColor = "transparent"};
}

}

</script>

</head>

 <body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>

<h1>Novedades</h1>

<p>Aquí presentamos las novedades del sitio.</p>

<h3>Lanzamos el producto X-FASHION</h3>

<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3>Mejoramos el producto T-MOTION</h3>

<p>Hemos lanzado una nueva versión del producto T-MOTION</p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</body>
</html>
« última modificación: 09 de Agosto 2016, 21:37 de Mario R. Rancel »
Dt. Crane psychiatrist

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1937
    • Ver Perfil
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:

Código: [Seleccionar]
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.

Salvadoruve2

  • Principiante
  • **
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Increible explicación.. gracias!
Dt. Crane psychiatrist

 

Esto es un laboratorio de ideas...
Aprender a programar

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".