Autor Tema: JavaScript Cambiar estilo y texto de cuadrados div. Ejercicio resuelto CU01138E  (Leído 1036 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Solución propuesta para el ejercicio CU01138E del tutorial pdf de programación web con JavaScript y ejercicios resueltos de aprenderaprogramar.

Citar
Crea un documento html con div central (“el cuadrado principal”) que contenga a su vez cuatro divs (los cuadrados secundarios).  Debajo del cuadrado principal debe aparecer un botón con el texto “Avanzar”. Inicialmente los cuatro cuadrados tendrán fondo blanco y un signo ? de gran tamaño. Al pulsar en el botón por primera vez, el cuadrado superior izquierdo debe aparecer con fondo negro, texto blanco, y tener como texto “El”. Al pulsar de nuevo el botón, el cuadrado superior derecho debe aparecer con fondo blanco y texto negro y tener como texto “poder”. Al pulsar de nuevo el botón el cuadrado inferior izquierdo debe aparecer con fondo blanco y texto negro y tener como texto “de”. Al pulsar de nuevo el botón el cuadrado inferior derecho debe aparecer con fondo amarillo y texto negro y tener como texto “JavaScript”. Si se pulsa nuevamente el botón avanzar debe mostrarse un mensaje que indique “No es posible avanzar más”.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01138E</title>
    <style>
        .cuadradoPrincipal {
            width: 504px;
            height: 504px;
            margin: auto;
            padding: auto;
        }

        .cuadradoSecundario {
            float: left;
            width: 250px;
            height: 250px;
            justify-content: center;
            align-items: center;
            display: flex;
            border: 1px solid black;
            font-size: 50px;
        }

        .boton {
            width: 150px;
            height: auto;
            margin: auto;
            padding: auto;
            margin-top: 10px;
            text-align: center;
            border: 2px solid grey;
            font-size: 25px;
            border-radius: 10px;
            background-color: black;
            transition: all 0.4s ease 0s;
            cursor: pointer;
            color: white;
        }
    </style>
    <script>
            var i = 0;
        function avanzarCuadrado(agregarUnClick){
            i = i + agregarUnClick;
            var div = document.body.childNodes[1].getElementsByTagName('div');

                if(i==1){
                    div[0].style.backgroundColor = 'black';
                    div[0].style.color = 'white'
                    div[0].textContent = 'El'
                } else if (i==2){
                    div[1].style.backgroundColor = 'white';
                    div[1].style.color = 'black'
                    div[1].textContent = 'poder'
                } else if (i==3){
                    div[2].style.backgroundColor = 'white';
                    div[2].style.color = 'black'
                    div[2].textContent = 'de'
                } else if (i==4){
                    div[3].style.backgroundColor = 'yellow';
                    div[3].style.color = 'black'
                    div[3].textContent = 'JavaScript'
                } else {
                    alert('No es posible avanzar más');
                }
        }       
    </script>
</head>
<body>
    <div class="cuadradoPrincipal">
        <div class="cuadradoSecundario">?</div>
        <div class="cuadradoSecundario">?</div>
        <div class="cuadradoSecundario">?</div>
        <div class="cuadradoSecundario">?</div>
    </div>
    <div class="boton" onclick="avanzarCuadrado(1)">AVANZAR</div>
</body>
</html>
« Última modificación: 25 de Septiembre 2020, 13:59 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2646
    • Ver Perfil
Buenas, el ejercicio está bien resuelto y cumple con lo que se pedía. Hay una llamada que es poco estándar que es var div = document.body.childNodes[1].getElementsByTagName('div');

En lugar de este tipo de llamada veo preferible usar una del tipo getElementsByClassName sin necesidad de usar childNodes como puede verse en este otro hilo: https://aprenderaprogramar.com/foros/index.php?topic=7500.0

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