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
<!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>
Tema: JavaScript uso de InnerHTML. Ejercicio resuelto display flex modificar CU01138E (Leído 1691 veces)
RSS -
WAP2