Se supone que debo crear un triángulo de X como se muestra en el enlace usando la imagen padString de 20 líneas de X comenzando con una X e incrementando una X por cada línea adicional
La pista que dieron fue que se supone que debo usar algo como...
let str = ""; str = str.padStart(i,”x”); // i is the loop counterLo que tengo hasta ahora es esto...
let xShape = "x"; for (let counter = 0; counter <= 20; counter = counter + 1) { xShape = xShape + "x" } document.getElementById("demo").innerHTML = xShape.padStart(xShape, "x"); <p id="demo"></p>Pero eso no escribe 20 líneas de X comenzando con la primera línea que tiene solo una X y cada nueva línea tiene una X adicional. Solo escribe la última línea de 20 X. ¿Cómo hago para que escriba las 20 líneas? Soy un principiante, y estoy haciendo esto para aprender. Muchas gracias por tu ayuda.
padStart toma la cadena que se le pasa y rellena el principio con el primer argumento tantas veces como el segundo argumento.
Entonces puede agregarlo a un bucle y simplemente pasarle una cadena vacía para que siempre tenga un punto de inicio vacío.
let xShape = ""; for (let counter = 0; counter <= 20; counter++) { xShape += "".padStart(counter, "x") + "<br>"; } document.getElementById("demo").innerHTML = xShape; <div id="demo"></div>Tendrá que recopilar líneas de salida en el bucle de alguna manera. Pero su uso de padStart también es incorrecto: el primer argumento no debe ser una cadena, sino un número. En realidad, debería ser su contador de bucle.
let lines = []; for (let counter = 1; counter <= 20; counter = counter + 1) { lines.push("".padStart(counter, "x")); } document.getElementById("demo").innerHTML = lines.join("<br>"); <p id="demo"></p> Tenga en cuenta que la repeat del método es más natural aquí:
let lines = []; for (let counter = 1; counter <= 20; counter = counter + 1) { lines.push("x".repeat(counter)); } document.getElementById("demo").innerHTML = lines.join("<br>"); <p id="demo"></p>En un enfoque más funcional:
document.getElementById("demo").innerHTML = Array.from({length:20}, (_, counter) => "x".repeat(counter+1)) .join("<br>"); <p id="demo"></p>