Change color javascript text

Question

Change color javascript text

Navigation

#1 by (4 votes)
#2 by (4 votes)
#3 by (2 votes)

5

I want to change several color labels h1 and h3 when I pass over them and in this way I only change one, each one has its 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>

I have this Javascript code

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

}

javascript html

asked by victor96 21.02.2018 в 19:18

source

3 answers

4

First: you create the functions and the flames in the necessary events in each element onmouseover = when the mouse is put on top , onmouseout = when the mouse is removed from the element.

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>

answered by 21.02.2018 в 19:25

2

Initially you are assigning several ID to different HTML tags remember that the IDs are unique for a single tag, ie only one element h1 can contain id="link" if you want to use the Identified for different elements you should use for CLASS that is, class="link" .
Since we do not use id you can not use document.getElementById () , you should use document.getElementsByClassName () . The problem with using getElementsByClassName is that it returns an array of all the elements that have that class, so if we have two elements with a class "link"
Example : <h1 class="enlace">soy h1</h1> <h3 class="enlace">Soy h3</h3> The getElementsByClassName method will return both objects to us in the form of an array. Then we must reference which we want to change the color. Here is an example of what I am talking about: 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>

Another way to do it with CSS would be simpler but good if you have to do it with js there is the solution. I also respond to this

answered by 21.02.2018 в 20:07

Capitalize keys that are being pressed from any input How to change the shape of the buttons in Windows Forms c #?

score 4 · Accepted Answer

You can not have more than one element with the same id , so if you wanted to group elements with certain properties it is advisable to use class or data-attributes

Based on this comment and using event delegation ( eg: Event delegation ), a solution using class could be the following:

Example

// 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>