Autor Tema: JavaScript uso de InnerHTML. Ejercicio resuelto display flex modificar CU01138E  (Leído 368 veces)

krakerbrain

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 7
    • Ver Perfil
Estimados amigos, pude hacer este ejercicio, pero quedé con una duda.

Al cambiar el Style  del div "cuadro1" tuve que usar display:flex, porque si no lo ponía solo se cambiaba el background del texto. Supongo que lo mismo ocurriria en "cuadro4" Vi otro ejercicio resuelto e intenté emular lo que hizo otro compañero pero no logré modificar mi resultado. Del resto creo que resolví bien el ejercicio. Ojalá puedan ayudarme

Saludos

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercio Inner Curso Javascript (CU01138E)</title>
    <style type="text/css">
    body {
        font-family: sans-serif;
        text-align:center;
    }
    .container{
        width: 500px;
        height: 500px;
        border: solid black 1px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
    }
    .cuadro{
        width: 248px;
        height: 248px;
        border: solid black 0.5px;
        flex: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
    }
    #boton{
        background-color: brown;
        border-radius: 40px;
        font-size: 25px;
        padding: 10px;
        margin: 30px;
        width: 150px;
        color: #ffffff;
        outline: none;
    }
    </style>
   <script type="text/javascript">
    var contador = 0;
    function avanzar() {
        if (contador==0){
            document.getElementById("cuadro1").innerHTML = '<div style=\' width:100%; height: 100%; background-color:#000000 ; color: #ffffff; display: flex; align-items: center; justify-content:center\'>El</div>';
            contador=1;
        }else if(contador==1){
            document.getElementById("cuadro2").innerHTML = "poder";
            contador=2;
        }else if(contador==2){
            document.getElementById("cuadro3").innerHTML = "de";
            contador=3;
        }else if(contador==3){
            document.getElementById("cuadro4").innerHTML = '<div style=\' width:100%; height: 100%; background-color:#ffff00 ; display: flex; align-items: center; justify-content:center\'>Javascript</div>';
            contador=4
        }else if(contador==4){
            alert("No se puede avanzar más")
        }
    }
        </script>
</head>
<body>
    <div class="container">
    <div id="cuadro1" class="cuadro">?</div>
    <div id="cuadro2" class="cuadro">?</div>
    <div id="cuadro3" class="cuadro">?</div>
    <div id="cuadro4" class="cuadro">?</div>
 </div>
    <button id="boton" class="btnAvanzar" onclick='avanzar()'>Avanzar</button>
</body>
</html>
« Última modificación: 09 de Mayo 2021, 20:58 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, para quien revise este ejercicio, está bien resuelto. Respecto al uso de display:flex; este no es imprescindible. Esto no es demasiado trascendente para este ejercicio, donde lo que interesa más es el código JavaScript (más que los detalles sobre CSS). Pueden verse otros ejercicios donde se resuelve sin flex, por ejemplo:

https://aprenderaprogramar.com/foros/index.php?topic=3864.0 en este hilo hay algunos comentarios interesantes.

https://aprenderaprogramar.com/foros/index.php?topic=3914.0 es otra propuesta de solución

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