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: Pandemia en 14 de Febrero 2017, 20:27
-
Hola amigos aquí dejo una posible solución al ejercicio CU01138E del manual de programación web con JavaScript......
EJERCICIO
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>
<head>
<meta charset="utf-8">
<title>Curso javascript aprenderaprogramar.com</title>
<style media="screen">
body {
font-family: sans-serif;
background-color: rgba(159, 166, 39, .38);
}
#container {
margin: 100px auto;
width: 200px;
height: 200px;
text-align: center;
position: relative;
border: 1px solid #000000;
}
.caja {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid #000000;
line-height: 6em;
}
#cajaSegundaria2 {
left: 100px;
}
#cajaSegundaria3 {
top: 100px;
}
#cajaSegundaria4 {
left: 100px;
top: 100px;
}
#avanzar {
margin: 215px auto;
width: 150px;
border-radius: 40px;
border: 1px solid #000000;
text-align: center;
position: relative;
cursor: pointer;
}
#avanzar:hover {
background-color: rgba(212, 246, 76, .54);
color: rgba(26, 219, 109, .56);
}
</style>
<script type="text/javascript">
var click = 0;
function modificador() {
click = click + 1;
var cajasDiv = document.getElementsByClassName('caja');
if (click == 1) {
cajasDiv[0].innerHTML = 'El';
cajasDiv[0].style.backgroundColor = 'black';
cajasDiv[0].style.color = 'white';
} else if (click == 2) {
cajasDiv[1].innerHTML = 'poder'
} else if (click == 3) {
cajasDiv[2].textContent = 'de'
} else if (click == 4) {
cajasDiv[3].style.backgroundColor = 'yellow';
cajasDiv[3].firstChild.nodeValue = 'javascript';
} else {
alert("No es posible avanzar más");
}
}
</script>
</head>
<body>
<div id="container">
<div id="cajaSegundaria1" class="caja">
?
</div>
<div id="cajaSegundaria2" class="caja">
?
</div>
<div id="cajaSegundaria3" class="caja">
?
</div>
<div id="cajaSegundaria4" class="caja">
?
</div>
<div id="avanzar" onclick="modificador()">
AVANZAR
</div>
</div>
</body>
</html>
Saludos y gracias a todos...... :)
-
Funciona correctamente. ;)