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

juandeto · « **en:** 26 de Marzo 2020, 19:09 »

Resolución ejercicio del Curso de programación web con JavaScript CU01138E:


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

Ogramar · « **Respuesta #1 en:** 13 de Septiembre 2020, 19:07 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

juandeto

JavaScript ejercicio resuelto diferencia ámbito global local innerHTML CU01138E

Ogramar

Re:JavaScript ejercicio resuelto diferencia ámbito global local innerHTML CU01138E#

Preguntas y respuestas

Foros aprenderaprogramar.com Didáctica y divulgación de la programación

Noticias:

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

juandeto

JavaScript ejercicio resuelto diferencia ámbito global local innerHTML CU01138E

Ogramar

Re:JavaScript ejercicio resuelto diferencia ámbito global local innerHTML CU01138E#

Preguntas y respuestas

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación