Autor Tema: JavaScript diferencia entre ámbito global y local ejemplo innerHTML: CU01138E  (Leído 25 veces)

juandeto

  • Sin experiencia
  • *
  • Mensajes: 8
    • Ver Perfil
Resolucion ejercicio del Curso de JavaScript (CU01138E):

Código: [Seleccionar]

<html>

<head>
    <title>Ejemplo Inner HTML</title>
    <meta charset="utf-8">
    <style type="text/css">
        .divprimario {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        .divsecundario {
            width: 198px;
            height: 198px;
            border: 1px solid black;
            text-align: center;
            font-size: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .boton {
            padding: 10px;
            font-size: 16px;
            font-weight: 600;
            background-color: beige;
            position: relative;
            left: 42%;
            margin: 40px;
            cursor: pointer;
        }

        .boton:hover {
            background-color: chocolate;
            color: darkgreen;
        }
    </style>

    <script type="text/javascript">
       var click = 0
        function cambiarColor() {
            click = click + 1;
            var nodoDiv = document.getElementsByClassName('divsecundario');
            if (click == 1) {
                nodoDiv[0].innerHTML = '<div style=\'background-color:black; color:white; height:100%; width: 100%; margin:auto;display:flex; align-items:center; justify-content:center;\'>El</div>';
            }
            else if (click == 2) {
                nodoDiv[1].innerHTML = '<div style=\' height:100%; width: 100%; margin:auto;display:flex; align-items:center; justify-content:center;\'>poder</div>';
            }
            else if (click == 3) {
                nodoDiv[2].innerHTML = '<div style=\' height:100%; width: 100%; margin:auto;display:flex; align-items:center; justify-content:center;\'>de</div>';
            }
            else if (click == 4) {
                nodoDiv[3].innerHTML = '<div style=\' background-color:yellow;color:black;height:100%; width: 100%; margin:auto;display:flex; align-items:center; justify-content:center;\'>JavaScript</div>';
            }
            else { alert('No es posible avanzar mas'); }

        }

    </script>
</head>

<body>
    <h1 style="text-align: center;">Ejercicio de Inner-HTML</h1>
    <div class="divprimario">
        <div class="divsecundario">?</div>
        <div class="divsecundario">?</div>
        <div class="divsecundario">?</div>
        <div class="divsecundario">?</div>
    </div>
    <button type="button" class="boton" onclick="cambiarColor()">Avanzar</button>
</body>

</html>



 

Esto es un laboratorio de ideas...
Aprender a programar

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".