Autor Tema: Ejemplo innerHTML JavaScript Ejercicio resuelto CU01138E Modificar texto o html  (Leído 4232 veces)

Cabanota

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 26
    • Ver Perfil
Hola colega. aquí traigo una posible solución del ejercicio de este tema, cualquier falla o recomendacion bienvenida sea.

Citar
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:

Código: [Seleccionar]
<!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>
« Última modificación: 11 de Mayo 2015, 23:46 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2074
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
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!
Responsable de departamento de producción aprenderaprogramar.com

 

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".