Autor Tema: JavaScript HTML Modificar el contenido de un div utilizando textContent CU01136E  (Leído 731 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Acá traigo resuelto el ejercicio CU01136E del curso de desarrollo web con JavaScript de aprenderaprogramar.

Creo que la resolución del ejercicio cumple con lo planteado, mis únicas dos dudas son las siguientes:

  • En mi navegador (Google Chrome) lo primero que se ejecuta es el script y una vez ingresado los números aparece el titulo (h1) y obviamente el mensaje de los números con sus operación correspondiente. Yo entiendo que el apartado pide que primero se ejecute el título + div vacio  y luego pida los 5 números y modifique el div agregando el mensaje. No se si hay un error de interpretación del enunciado o está mal el código por eso no se ejecuta en el orden correcto.
  • El enunciado dice que el mensaje debe ser los números ingresados * 3 = resultado de la multiplicación, y a todo esto separado por una coma (,). Eso está bien resuelto, pero yo por ser más ordenado, quise suplantar la coma por un salto de linea y no pude lograrlo. Probé con \n y con <br> y no hubo forma


Enunciado:
Citar
Crea un documento html con un texto en una etiqueta h1 como “Ejercicio curso aprenderaprogramar.com” y un div a continuación. Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números introducidos por el usuario en un array. A continuación, accede al nodo del div y establece que muestre un texto informando del resultado de multiplicar cada uno de los números por 3 (para ello usa textContent). Ejemplo:

Al cargar la página aparecerá: Ejercicio curso aprenderaprogramar.com

      … (div vacío)

Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7

A continuación en la página se visualizará: Ejercicio curso aprenderaprogramar.com

Multiplicamos por 3 los números introducidos: 1*3 = 3, 3*3 = 9, 9*3 = 27, 10*3 = 30 y 7*3 =21.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01136E</title>
    <script>
        var numeroGuardado = [];
        var msg = '';
        var nodoDiv = document.getElementsByTagName('div');
        function pedirNumeros(){
            for(i=0; i<5; i++){
                numeroPedido = prompt('Ingrese un número');
                numeroGuardado[i] = Number(numeroPedido);
                msg = msg + numeroGuardado[i] + '*3 = ' + (numeroGuardado[i] * 3) + ', ';
            }
            nodoDiv[0].textContent = msg;
        }
    </script>
</head>
<body>
    <h1>Ejercicio curso aprenderaprogramar.com</h1>
    <div> </div>
    <script>pedirNumeros();</script>
</body>
</html>
« Última modificación: 25 de Septiembre 2020, 13:55 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2645
    • Ver Perfil
Buenas, el ejercicio está bien resuelto y cumple con lo que se pedía. La estructura del código (un script directamente dentro del body) no es la que se utiliza en los ejemplos del curso. Si quiere verse una solución sin el script directamente dentro del body puede consultarse el hilo https://aprenderaprogramar.com/foros/index.php?topic=3894.0 Al quitar el script del body en principio ya no habrá problemas en cuanto al orden de ejecución. En mi navegador se ve "Ejercicio curso aprenderaprogramar.com" e inmediatamente salta la petición de que se ingrese un número a través del prompt.

Sobre la introducción de saltos de línea, el problema puede estar relacionado con el propio carácter de textContent que en cierta manera limite los caracteres y posibilidades que admite al considerar todo texto. He hecho una prueba por curiosidad, y si uso <br/> y innerHTML sí me introduce los saltos de línea.

Salu2

 

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