Добавить при щелчке с помощью javascript в img, созданный с помощью javascript

Question

У меня есть функция javascript, которая создает несколько блоков div, содержащих изображения, и применяет событие onclick к каждому из них. Когда вы нажимаете на изображение, оно должно открывать соответствующую веб-страницу; однако кажется, что функция применяет одно и то же событие onclick к каждому из них (она не различает каждое изображение).

Вот код:

function UpdateDock() {
    $.get("apps", function(data){
        var Dock = document.getElementById("Dock");
        var Apps = JSON.parse(data);

        for (var App in Apps) {
            if (Apps[App]["Dock"] == "1") {
                // Create a box to store the application
                var ApplicationBox = document.createElement("div");
                ApplicationBox.className = "App"

                // Put the icon inside the box
                var Icon = document.createElement("img");
                Icon.src = `static/images/ApplicationIcons/${Apps[App]["Folder"]}.png`;
                Icon.id = Apps[App]["URL"];

                Icon.onclick = function() {OpenApplication(Icon.id)};

                // Put the icon in the box and the box in the dock
                ApplicationBox.appendChild(Icon);
                Dock.appendChild(ApplicationBox);
            }
        }
    });
}

Вот что я я пытаюсь сделать:

1. Jquery обращается к маршруту на сервере, чтобы получить веб-страницы (приложения), которые должны отображаться в div в нижней части экрана (Dock ).

2. Этот маршрут отправляет объект json, который указывает, какие веб-страницы доступны, какие из них отображать и соответствующие URL-адреса.

3. Создается div для хранения изображения, связанного с приложением, чтобы его можно было выровнять.

4. Изображение вставляется в div.

5. Событие onclick добавляется к изображению, чтобы оно открывало соответствующий URL-адрес при нажатии (мне нужно, чтобы это было событие onclick - поскольку оно открывает его в iframe, встроенном в ту же страницу).

6. Div вставлен в док.

Это хорошо работает, когда есть только одно приложение (веб-страница), но когда есть более одного приложения, все они переносятся на один и тот же URL-адрес onclick. На стороне сервера приложения извлекаются в алфавитном порядке (они считываются из файловой системы), и кажется, что URL-адрес, прикрепленный ко всем приложениям, такой же, как и первый. Например, если у меня есть приложения «Банан» и «Кошка», оба откроют страницу «Банан».

Я могу попробовать изменить функцию «OpenApplication», чтобы открывать URL-адрес на основе идентификатора отправителя ( который можно назвать соответствующим образом при добавлении к l oop), но мне понадобится способ ссылки на отправителя. Вот текущая функция:

function OpenApplication(Application) {
    // Changes the active application and animates the transition
    var ActiveApplication = document.getElementById("ActiveApplication");
    console.log(Application);
    ActiveApplication.style.animation = "Hide 1s";
    ActiveApplication.src = Application;
    ActiveApplication.style.animation = "Show 1s";
}

Вместо того, чтобы передавать Application в качестве переменной, есть ли способ указать, какое событие onclick активировало функцию?

Думаю, здесь есть два вопроса :

1. Что не так с моим l oop? Почему для каждого приложения применяется один и тот же URL-адрес?

2. Могу ли я решить эту проблему, указав отправителя в функции OpenApplication? Если да, то как мне сослаться на отправителя?

Answer 1

При обратном вызове прослушивателя кликов вы получите параметр события и получите доступ к его цели, которая в основном является элементом, который вызвал событие

Вы можете использовать один из это два способа

Первый способ:

icon.addEventListener('click' , event => {
  const {target} = event
  //Now target does reference to the element that happened the click
  OpenApplication(target)

})

Второй способ

Icon.onclick = function(e) {OpenApplication(e.target.id)};