0

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] + ")";
}
Daniele
  • 1
  • 1
  • 5
    Check out *loops* – trincot Apr 14 '21 at 13:21
  • 3
    Use [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple events — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](https://stackoverflow.com/tags/event-delegation/info) and [What is DOM Event delegation?](https://stackoverflow.com/q/1687296/4642212). – Sebastian Simon Apr 14 '21 at 13:21

0 Answers0