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

cristiannd · « **en:** 23 de Abril 2020, 02:11 »

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>

Ogramar · « **Respuesta #1 en:** 25 de Septiembre 2020, 13:56 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: