mi problema es cargar imagenes en diferentes divs (llamados "immaggine"), todo va bien hasta que llego a 5i
este es mi código:
function caricaGrid() { const divs = document.getElementsByClassName("immagine"); let stringaIniziale = "assets/image_part_00"; let i = 1; for(let j = 0; j < 6; j++) for(let k = 0; k < 6; k++) { let img = document.createElement('img'); if(i < 10) stringaIniziale += i + ".png"; else { stringaIniziale = "assets/image_part_0"; stringaIniziale += i + ".png"; } img.setAttribute("src", stringaIniziale); img.setAttribute("data-id", i); divs[i++].appendChild(img); console.log(stringaIniziale); stringaIniziale = "assets/image_part_00"; }}
el problema ocurre cuando la "i" supera el 5, debajo de los logs:
index.js:20 assets/image_part_001.png index.js:20 assets/image_part_002.png index.js:20 assets/image_part_003.png index.js:20 assets/image_part_004.png index.js:20 assets/image_part_005.png index.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild') at caricaGrid (index.js:19) caricaGrid @ index.js:19 load (asinc) (anonimo) @ index.js:3si pudiera ayudar aquí está el HTML:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cartoleria</title> </head> <body> <main> <div class="grid"> <div class="immagine"></div> <div class="immagine"></div> <div class="immagine"></div> <div class="immagine"></div> <div class="immagine"></div> <div class="immagine"></div> </div> </main> <script src="index.js"></script> </body> </html>alguien sabria como ayudarme?
Definitivamente no tengo idea de qué estás tratando de hacer, pero he aquí por qué te enfrentas al error:
El siguiente código se imprimirá del 1 al 36
let i = 1; for(let j = 0; j < 6; j++){ for(let k = 0; k<6; k++){ console.log(i++); } } Sin embargo, según su código html, solo tiene 6 divs con la clase immagine . lo que significa que el último índice de su matriz divs[] será 5 . pero el código que escribió usará incluso los divs[36] en el último ciclo, lo que le causará el error que mencionó anteriormente.
puede usar K o J para sus divs[] en función de lo que está tratando de hacer (¡lo cual no sé!):
for(let j = 0; j < 6; j++){ for(let k = 0; k<6; k++){ // ... divs[k].appendChild(img); // or divs[j].appendChild(img); // ... } }