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: Cabanota en 11 de Mayo 2015, 21:38
-
Hola colega. aquí traigo una posible solución del ejercicio de este tema, cualquier falla o recomendacion bienvenida sea.
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”.
Código:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<style type="text/css">
body{
margin: 0 auto;
}
#container{
border: none;
width: 205px;
height: 205px;
overflow: hidden;
}
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
/*margin: 1px;*/
}
div#uno, div#dos, div#tres, div#cuatro{
border: 1px solid black;
}
input{
display: block;
clear: both;
margin-left: 70px;
}
</style>
<script type="text/javascript">
var cont = 0;
function inicio () {
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var cuatro = document.getElementById("cuatro");
var boton = document.getElementById("botonUnico");
boton.addEventListener("click", function(){
cont++;
if (cont == 1) {
uno.innerHTML = "<div style='background-color:black; width:100px; height:100px; color:white'>El<div/>";
};
if (cont == 2) {
dos.textContent = "poder";
};
if (cont == 3) {
tres.textContent = "de";
};
if (cont == 4) {
cuatro.innerHTML = "<div style=' background-color:yellow'>JavaScript<div/>";
};
if (cont > 4) {
alert("No es posible avanzar más.");
};
});
}
</script>
</head>
<body>
<div id="container">
<div id="uno">?</div>
<div id="dos">?</div>
<div id="tres">?</div>
<div id="cuatro">?</div>
</div>
<input type="button" value="Avanzar" id="botonUnico"/>
<script type="text/javascript">
inicio();
</script>
</body>
</html>
-
Hola Cabanota lo veo todo bien.
Creo que estás haciendo uso de cosas que todavía no se han explicado en el curso como addEventListener.
Estas etiquetas <title></title> podrías omitirlas ya que al no tener contenido realmente no son útiles.
Hay unos punto y coma que no generan ningún error pero se podrían quitar:
if (cont == 2) {
dos.textContent = "poder";
};
El punto y coma se puede quitar.
Aquí en cambio sí falta un punto y coma:
cuatro.innerHTML = "<div style=' background-color:yellow'>
cuatro.innerHTML = "<div style=' background-color:yellow;'>
color:white'>El<div/>";
color:white;'>El<div/>";
Saludos!