i'm a beginner in Javascript and doing the 100+ JavaScript Projects for Beginners, currently at the 9th, Modal project.
So i'm at the part where i have to make it that when you click an image it shows the image you just clicked on, and i have 16 images to click on, that's what i came up with, it works, but it's super long so i wondered how i might make it more compact or efficient.
var images = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/7.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg",
"images/11.jpg",
"images/12.jpg",
"images/13.jpg",
"images/14.jpg",
"images/15.jpg",
"images/16.jpg",
];
let i = -1;
var items = document.getElementsByClassName("item-img");
items[0].onclick = function () {
i = 0;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[1].onclick = function () {
i = 1;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[2].onclick = function () {
i = 2;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[3].onclick = function () {
i = 3;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[4].onclick = function () {
i = 4;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[5].onclick = function () {
i = 5;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[6].onclick = function () {
i = 6;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[7].onclick = function () {
i = 7;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[8].onclick = function () {
i = 8;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[9].onclick = function () {
i = 9;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[10].onclick = function () {
i = 10;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[11].onclick = function () {
i = 11;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[12].onclick = function () {
i = 12;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[13].onclick = function () {
i = 13;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[14].onclick = function () {
i = 14;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}
items[15].onclick = function () {
i = 15;
document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}