« anterior próximo »
Páginas: [1]

Autor Tema: Ejercicio resuelto innerHTML JavaScript. Efecto modificar texto o html CU01138E  (Leído 2298 veces)

settezza

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 9
    • Ver Perfil
Ejercicio resuelto innerHTML JavaScript. Efecto modificar texto o html CU01138E
« 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

Citar
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: [Seleccionar]
<!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>
« Última modificación: 13 de Septiembre 2020, 19:04 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Ejercicio resuelto innerHTML JavaScript. Efecto modificar texto o html CU01138E
« Respuesta #1 en: 28 de Julio 2020, 20:04 »
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
« Última modificación: 13 de Septiembre 2020, 19:05 por Ogramar »
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".