Autor Tema: JavaScript ejercicio resuelto diferencia ámbito global local innerHTML CU01138E  (Leído 788 veces)

juandeto

  • Sin experiencia
  • *
  • Mensajes: 11
    • Ver Perfil
Resolución ejercicio del Curso de programación web con 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>


« Última modificación: 09 de Mayo 2021, 20:53 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, para quien revise este ejercicio, está bien resuelto y realiza a la perfección lo que se pedía. Hay varias maneras de resolverlo, quien lo desee puede consultar otras soluciones en los foros. Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

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".