Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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>
-
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