my problem is to load images in different divs (called "immaggine"), everything is fine until I get to 5 i
this is my code:
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";
}
}
the problem occurs when the "i" surpasses the 5, below the 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:3
if it could help here is the 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>
would anyone know how to help me?
I definitely have no idea what are you trying to do but here's why you face the error:
The following code will print out from 1 to 36
let i = 1;
for(let j = 0; j < 6; j++){
for(let k = 0; k<6; k++){
console.log(i++);
}
}
However based on your html code, you only have 6 divs with the immagine class.
which means the last index of your divs[] array is going to be 5.
but the code you wrote will use even the divs[36] in the last loop which will cause you the error you've mentioned above.
you can use K or J for your divs[] based on what you're trying to do (which I dont know!) :
for(let j = 0; j < 6; j++){
for(let k = 0; k<6; k++){
// ...
divs[k].appendChild(img);
// or
divs[j].appendChild(img);
// ...
}
}