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
    el 13 jun. 2019 a las 16:38
  • 1
    Recuerda marcar con un check a la respuesta que te ha servido, saludos. 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
    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
    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 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
    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
    el 13 jun. 2019 a las 16:07
  • 1
    Un placer ayudarte! 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
    el 13 jun. 2019 a las 16:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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