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: settezza en 17 de Septiembre 2019, 01:45
-
Hola nuevamente, les dejo mi propuesta al ejercicio CU01138E del curso de programación JavaScript con ejemplos resueltos. Saludos
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>
<title>Ejercicio innerHTML CU01138E</title>
<meta charset="utf-8">
<style type="text/css">
#divPadre{
height:200px;
width:200px;
}
div div{
height:58px;
width: 98px;
padding: 40px 0px 0px 0px;
background-color: white;
text-align: center;
float: left;
border: 1px solid black;
font-family: impact;
color: black;
}
</style>
<script type="text/javascript">
var aux = 0;
function cambiarTexto(texto){
var palabras = ["El", "poder", "de", "JavaScript"];
etiquetas = document.getElementsByName(texto);
for(var i=0; i<etiquetas.length; i++){
if(aux==i){
etiquetas[i].innerHTML=palabras[i];
if(i==0){
etiquetas[i].style.backgroundColor="black";
etiquetas[i].style.color="white";
}
if(i==3){
etiquetas[i].style.backgroundColor="yellow";
etiquetas[i].style.color="black";
}
aux++;
break;
}else if(aux==etiquetas.length){
alert("No es posible avanzar más");
break;
}
}
}
</script>
</head>
<body>
<div id="divPadre">
<div id="div1" name="grupoDiv">?</div>
<div id="div2" name="grupoDiv">?</div>
<div id="div3" name="grupoDiv">?</div>
<div id="div4" name="grupoDiv">?</div>
</div>
<input type="submit" value="Enviar" onclick="cambiarTexto('grupoDiv')"/>
</body>
</html>
-
Buenas, para quien revise este ejercicio, está bien resuelto y realiza lo que se pedía. Hay varias maneras de resolverlo, quien lo desee puede consultar otras soluciones en los foros. Salu2