Skip to main content
se eliminaron 9 caracteres en el cuerpo
Origen Enlace
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49
<!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()">1</div><br>
        <div id="div2" onmouseover="aparecerTexto()" >2</div>
        <script>
            //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;
            }
        </script>
    </body>
</html>

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

<!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()">1</div><br>
        <div id="div2" onmouseover="aparecerTexto()" >2</div>
        <script>
            //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;
            }
        </script>
    </body>
</html>

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

Origen Enlace

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

<!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()">1</div><br>
        <div id="div2" onmouseover="aparecerTexto()" >2</div>
        <script>
            //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;
            }
        </script>
    </body>
</html>