Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Salvadoruve2 en 06 de Agosto 2016, 14:59
-
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:
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):
<!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
-
Vale he corregido unos errores que tenía en el código.. aún así sigue sin funcionar.
VERSIÓN 2
<!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>
-
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
<!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>
-
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.
-
Increible explicación.. gracias!