4

Tengo un problema con los eventos onClick y onMouseover. Tengo dos elementos div para aplicarles eventos diferentes.

El primer div al aplicar un evento onClick, quiero que cambie el color del segundo a dorado. Viendo el código no veo dónde me he podido equivocar.

El segundo div al aplicar el evento onMouseover quiero que se ponga ese texto en el primer div y no hay forma.

Gracias por la ayuda. Adjunto el código que llevo hasta el momento.

//Poner div de abajo dorado.
function cambiarColor() {
    var a = document.getElementById('div2');
    a.style.color='gold';            
}
//Introducir en el div de arriba texto.
function aparecerTexto() {
    var x = document.getElementById("div1");
    var texto = 'Texto para que se vea en el div de arriba'
    //No se como ponerlo para que se vea.
}
#div1 {
    background-color: cyan; 
    width: 200px; 
    height: 50px;
} 
#div2 {
    background-color: yellow; 
    width: 200px; 
    height: 50px;
}
<div id="div1" onclick="cambiarColor()"></div><br>
<div id="div2" onmouseover="aparecerTexto()" ></div>

2
  • 1
    Gracias @Merling Samuel Sobalvarro por la edición!!
    – xavicoder
    Commented el 13 jun. 2019 a las 16:38
  • 1
    Recuerda marcar con un check a la respuesta que te ha servido, saludos. Commented el 13 jun. 2019 a las 16:45

3 respuestas 3

5

Para agregar el color a un elemento tienes que utilizar style.backgroundColor=. En tu función aparecerTexto, no estabas asignándole la variable texto a tu variable x por medio de innerHTML insertar el texto en el div, de esta forma funciona correctamente.

            //Poner div de abajo dorado.
            function cambiarColor() {
                var a = document.getElementById('div2');
                a.style.backgroundColor='gold';            
            }
            //Introducir en el div de arriba texto.
            function aparecerTexto() {
                var x = document.getElementById("div1");
                var texto = 'Texto para que se vea en el div de arriba';
                
                x.innerHTML = texto;
                //No se como ponerlo para que se vea.
            }
      
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style type="text/css">
            #div1 {
                background-color: cyan; 
                width: 200px; 
                height: 50px;
            } 
            #div2 {
                background-color: yellow; 
                width: 200px; 
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="div1" onclick="cambiarColor()"></div><br>
        <div id="div2" onmouseover="aparecerTexto()" ></div>
      
    </body>
</html>

4
  • Pero ese texto aparece de saque y a mi lo que me interesa es que aparezca cuando hago onmouseover no nadamas cargue la pagina. El tema del color bien!
    – xavicoder
    Commented el 13 jun. 2019 a las 16:03
  • Ahi perdona si que funciona perfecto el onmouseover era mi navegador la cache. Saludos y gracias!!!
    – xavicoder
    Commented el 13 jun. 2019 a las 16:05
  • 1
    De nada, recuerda si mi respuesta fu de ayuda a resolver tu problema, marcala con la palomita verde, así en caso de que algún compañero tenga el mismo problema sepa cuál fue la solución. Saludos :D Commented el 13 jun. 2019 a las 16:07
  • 1
    Luego he hecho un onmouseout para que al salir se vaya y tambien un boton de resetear todo al estado original que sino quedaba pobre. Saludos :D
    – xavicoder
    Commented el 13 jun. 2019 a las 16:50
3

Solo cambia el orden del javascript para que no cargue inicialmente.

                //Poner div de abajo dorado.
                function cambiarColor() {
                    var a = document.getElementById('div2');
                    //a.style.color='gold';            
    				a.style.background ='gold';            
                }
                //Introducir en el div de arriba texto.
                function aparecerTexto() {
                    var x = document.getElementById("div1");
                    var texto = 'Texto para que se vea en el div de arriba'
    				x.innerHTML = texto;
                }
                #div1 {
                    background-color: cyan; 
                    width: 200px; 
                    height: 50px;
                } 
                #div2 {
                    background-color: yellow; 
                    width: 200px; 
                    height: 50px;
                }
<div id="div1" onclick="cambiarColor()">1</div><br>
<div id="div2" onmouseover="aparecerTexto()" >2</div>

2
  • Me estaba rayando y era por el orden del javascript saludos Raul!
    – xavicoder
    Commented el 13 jun. 2019 a las 16:07
  • 1
    Un placer ayudarte! Commented el 13 jun. 2019 a las 16:39
3

En primer lugar, estás cambiando la propiedad "color" del div a 'gold', como no tienes ningún contenido en ese div, no te muestra nada, prueba con background o backgroundColor:

a.style.backgroundColor='gold';
a.style.background='gold';                        

En segundo lugar, para insertar texto en un elemento, la forma más segura es usando .innerText.

Te dejo tu código adaptado para que puedas verlo funcionando

//Poner div de abajo dorado.
function cambiarColor() {
    var a = document.getElementById('div2');
    a.style.background='gold';            
}
//Introducir en el div de arriba texto.
function aparecerTexto() {
    var x = document.getElementById("div1");
    var texto = 'Texto para que se vea en el div de arriba'

    x.innerText = texto;
    //No se como ponerlo para que se vea.
}
#div1 {
    background-color: cyan; 
    width: 200px; 
    height: 50px;
} 
#div2 {
    background-color: yellow; 
    width: 200px; 
    height: 50px;
}
<div id="div1" onclick="cambiarColor()"></div><br>
<div id="div2" onmouseover="aparecerTexto()" ></div>

1
  • Gracias por la respuesta tambien Fernando!!!
    – xavicoder
    Commented el 13 jun. 2019 a las 16:07

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.