Solución propuesta para el ejercicio CU01138E del tutorial pdf de programación web con JavaScript y ejercicios resueltos de aprenderaprogramar.
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”.
<!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>
Tema: JavaScript Cambiar estilo y texto de cuadrados div. Ejercicio resuelto CU01138E (Leído 1760 veces)
RSS -
WAP2