6

Quiero cambiar varias etiquetas h1 y h3 de color cuando paso sobre ellos y de esta forma solo me cambia uno, cada uno tiene su ID.

    <!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html"/>
    <meta charset="UTF-8"/>
    <title>Ejercicio 2 - Eventos</title><meta charset="utf-8">

    <style>
        body {font-family:Arial;}
    </style>


</head>
<body>

    <h1 id="enlace">Novedades</h1>
    <p>Aquí presentamos las novedades del sitio.</p>
    <h3 id="enlace">Lanzamos el producto X-FASHION</h3>
    <p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
    <div><img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/14067484_1158738217503225_7524550350452532772_n.png?oh=b3024e965f9df64fba062e265fb0fcd1&oe=590C71CE" title="Imagen del producto" alt="imagen producto x-fashion" /></div>
    <h3 id="enlace">Mejoramos el producto T-MOTION</h3>
    <p>Hemos lanzado una nueva versión del producto T-MOTION</p>
    <div><img src="http://cheerskills.com/wp-content/uploads/2012/03/Screen-shot-2012-03-25-at-6.14.58-PM.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></div>



    <script type="text/javascript" src="DWEC_T06_Ejercicio2.js"></script>

    </body>
</html>

Tengo este codigo Javascript

    //Funcion que cambia el color de los enlaces a naranja al pasar por encima

document.getElementById("enlace").addEventListener("mouseover", porencima);
document.getElementById("enlace").addEventListener("mouseout", alquitar);



function porencima() {

    document.getElementById("enlace").style.color = "orange";

}

function alquitar() {

    document.getElementById("enlace").style.color = "brown";

}
6
  • En realidad no tienes ningún enlace en tu código de ejemplo Commented el 21 feb. 2018 a las 18:21
  • Cierto, me confundi pero quiero que haga eso
    – victor96
    Commented el 21 feb. 2018 a las 18:26
  • Prueba la respuesta a ver si te resulta Commented el 21 feb. 2018 a las 18:27
  • Tu código no es correcto porque tienes varios elementos con la misma id "enlace", cámbialos por class="enlace" y seguramente funcionará; aunque te recomiendo hacerlo como sugiere Hector Lara en su respuesta, solo con CSS.
    – Triby
    Commented el 21 feb. 2018 a las 18:35
  • Si cambiara las ID por class, ¿que deberia usar en vez de getElementById?
    – victor96
    Commented el 21 feb. 2018 a las 18:37

3 respuestas 3

4

No puedes tener más de un elemento con el mismo id, por lo que si quisieras agrupar elementos con ciertas propiedades es recomendable usar class o data-attributes

Basándome en este comentario y usando delegación de eventos (eg: Event delegation), una solución usando class podría ser la siguiente:

Ejemplo

// Cuando el mouse pasa por encima de algún elemento
window.addEventListener('mouseover', function(evt) {
  // Si elemento tiene la clase `enlace`
  if (evt.target.classList.contains('enlace')) {
    evt.target.style.color = 'orange';
  }
});

// Cuando el mouse salga de encima de algún elemento
window.addEventListener('mouseout', function(evt) {
  // Si elemento tiene la clase `enlace`
  if (evt.target.classList.contains('enlace')) {
    evt.target.style.color = 'brown';
  }
});
<h1 class="enlace">Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3 class="enlace">Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<div><img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/14067484_1158738217503225_7524550350452532772_n.png?oh=b3024e965f9df64fba062e265fb0fcd1&oe=590C71CE" title="Imagen del producto" alt="imagen producto x-fashion" /></div>
<h3 id="enlace">Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<div><img src="http://cheerskills.com/wp-content/uploads/2012/03/Screen-shot-2012-03-25-at-6.14.58-PM.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></div>

1
  • Esto era lo que quería, gracias.
    – victor96
    Commented el 21 feb. 2018 a las 18:56
4

Primero : creas las funciones y la llamas en los eventos necesarios en cada elemento onmouseover = cuando el mouse se pone encima, onmouseout = cuando el mouse se retira del elemento.

function porencima(x) {
 x.style.color = "orange";
}

function alquitar(x) {
x.style.color = "brown";
}
<h1 class="enlace" onmouseover="porencima(this)" onmouseout="alquitar(this)">Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3 class="enlace" onmouseover="porencima(this)" onmouseout="alquitar(this)">Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<div><img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/14067484_1158738217503225_7524550350452532772_n.png?oh=b3024e965f9df64fba062e265fb0fcd1&oe=590C71CE" title="Imagen del producto" alt="imagen producto x-fashion" /></div>
<h3 class="enlace" onmouseover="porencima(this)" onmouseout="alquitar(this)">Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<div><img src="http://cheerskills.com/wp-content/uploads/2012/03/Screen-shot-2012-03-25-at-6.14.58-PM.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></div>



<script type="text/javascript" src="DWEC_T06_Ejercicio2.js"></script>

3
  • Lo se, pero en este ejercicio en concreto debo utilizar addEventListener.
    – victor96
    Commented el 21 feb. 2018 a las 18:27
  • ¿No existe alguna forma de cambiar de color todas las etiquetas h1, por ejemplo?
    – victor96
    Commented el 21 feb. 2018 a las 18:35
  • Claro que si existen maneras Commented el 21 feb. 2018 a las 18:36
3

En un principio estas asignando varios ID a distintos tags de HTML recuerda que los ID son únicos para un solo tag, es decir solo un elemento h1 puede contener id="enlace" si quieres utilizar el mismo identificado para distintos elementos debes usar para CLASS es decir que quedaria class="enlace".
Ya que no utilizamos id tampoco puedes usar document.getElementById() , debes usar document.getElementsByClassName(). El problema de utilizar getElementsByClassName es que nos devuelve un arreglo de todos los elementos que tengan esa clase, osea que si tenemos dos elementos con una clase "enlace"
Ejemplo: <h1 class="enlace">soy h1</h1> <h3 class="enlace">Soy h3</h3> El metodo getElementsByClassName nos devolvera ambos objetos en forma de arreglo. Entonces deberemos referenciar a cual queremos cambiarle el color. Te dejo un ejemplo de lo que estoy hablando :P

//Obtenemos todos los elementos con la clase "enlace"
var elementos = document.getElementsByClassName("enlace");

//Recorremos el arreglo con todos los elementos, asignando a cada uno los listener.
for(var i = 0; i < elementos.length; i++){
    elementos[i].addEventListener("mouseover", porencima);
    elementos[i].addEventListener("mouseout", alquitar);
}

//Al usar this hacemos referencia al objeto que invoco la funcion
function porencima() {
    this.style.color = "orange";
}

function alquitar() {
    this.style.color = "brown";
}
    <!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html"/>
    <meta charset="UTF-8"/>
    <title>Ejercicio 2 - Eventos</title><meta charset="utf-8">

    <style>
        body {font-family:Arial;}
    </style>


</head>
<body>

    <h1 class="enlace">Novedades</h1>
    <p>Aquí presentamos las novedades del sitio.</p>
    <h3 class="enlace">Lanzamos el producto X-FASHION</h3>
    <p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
    <div><img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/14067484_1158738217503225_7524550350452532772_n.png?oh=b3024e965f9df64fba062e265fb0fcd1&oe=590C71CE" title="Imagen del producto" alt="imagen producto x-fashion" /></div>
    <h3 class="enlace">Mejoramos el producto T-MOTION</h3>
    <p>Hemos lanzado una nueva versión del producto T-MOTION</p>
    <div><img src="http://cheerskills.com/wp-content/uploads/2012/03/Screen-shot-2012-03-25-at-6.14.58-PM.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></div>



    <script type="text/javascript" src="DWEC_T06_Ejercicio2.js"></script>

    </body>
</html>

Otra manera seria hacerlo con CSS seria mas sencillo pero bueno si tienes que hacerlo con js ahi esta la solucion. Tambien te respondo a esto

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.