2

El código de abajo lista en pantalla los cuatro valores de la matriz const nums.

Sin embargo, al usar text += lo que esperaría es que la variable text repitiese su valor antes de añadir el nuevo valor con cada nuevo ciclo dando lugar al siguiente resultado en pantalla:

  1. Uno
  2. Uno Dos
  3. Uno DosTres
  4. Uno Dos Tres Cuatro

Mi suposición errónea es que al transportar la lógica del operador += a la tabla ol de HTML se añada un nuevo valor de la matriz a los ya existentes por cada ciclo.

Dado esto, me surgen dos dudas.

  1. Si todos los valores del array son de tipo string, ¿por qué no añade el valor que ya tiene al usar el operando?
  2. ¿Qué debería hacer para que cada nuevo elemento li de la tabla contenga los valores anteriores antes de añadir el nuevo valor?

const nums = ["Uno", "Dos", "Tres", "Cuatro"];
let fLen = nums.length;

let text = "<ol>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + nums[i] + "</li>";
}
text += "</ol>";

document.getElementById("demo").innerHTML = text;
<!DOCTYPE html>
<html>
<body>

<h2>Arrays</h2>

<p>Los primeros cuatro numerales son:</p>

<p id="demo"></p>

</body>
</html>

1
  • 1
    Porque el operador += añade la información a la actual, pero reinicia su valor al guardarlo. "a"+="b"="ab" y no "aab" Commented el 14 ene. 2022 a las 16:00

1 respuesta 1

3

Si todos los valores del array son de tipo string, ¿por qué no añade el valor que ya tiene al usar el operando?

Estás presuponiendo que se agregará el contenido acumulado de los elementos anteriores del listado al contenido del nuevo, pero lo que estás haciendo es, realmente, agregar más HTML a una variable que contiene solo código HTML.

Cada iteración nums[i] contiene el elemento en curso, independientemente de lo que contenga la variable text, y no el texto acumulado, de modo que eso es lo que agregarás a cada elemento del listado HTML <li> que estás creando.


¿Qué debería hacer para que cada nuevo elemento li de la tabla contenga los valores anteriores antes de añadir el nuevo valor?

Para conseguir lo que deseas debes almacenar la suma de las cadenas de manera independiente al HTML que generas y, además, agregar dicho valor a cada elemento de la lista en vez de el elemento en curso:

const nums = ["Uno", "Dos", "Tres", "Cuatro"];
let fLen = nums.length;

/* Aquí acumulamos los elementos uno tras otro */
let cadena = ""
let text = "<ol>";
for (let i = 0; i < fLen; i++) {
  /* Ahora debemos agregar a la cadena el valor curso */
  cadena += nums[i];
  /* Y mostrar en el HTML lo que llevamos acumulado */
  text += "<li>" + cadena + "</li>";
}
text += "</ol>";

document.getElementById("demo").innerHTML = text;
<!DOCTYPE html>
<html>
<body>

<h2>Arrays</h2>

<p>Los primeros cuatro numerales son:</p>

<p id="demo"></p>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.