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] + ")";
}
