Как добавить Eventlistener для всех элементов на странице, идентификаторы которых находятся внутри моего массива, используя javascript

Question

У меня есть элементы с идентификаторами на моей странице. Также у меня есть массив, который включает в себя идентификаторы.

const locations = [{
    "location": "hauptbahnhof",
    "color": "Magenta"
  },
  {
    "location": "Kröpke",
    "color": "Yellow"
  },
  {
    "location": "KröpckeUhr",
    "color": "Green"
  },
]
for (var i = 0; i < locations.length; i++) {
  var ids = locations[i].location;
  console.log(ids);
}

<div id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id="Kröpke">Kröpke</div>
  <div id="KröpckeUhr">Kröpcke Uhr</div>
  <div id="Drumstreet">Drumstreet</div>
</div>

Это дает мне все локации. Теперь я хочу добавить Eventlistener для всех Объектов на моей странице, которые Массив включает их идентификаторы, используя javascript.

Answer 1

Получить элемент по идентификатору и добавить к нему функцию прослушивания событий element.addEventListener("click", myFunction); Для демонстрационных целей соответствующий div будет иметь красный цвет при щелчке.

РЕДАКТИРОВАТЬ после компонента

Проверьте, если элемент существует после поиска по идентификатору:

const element = document.getElementById(locationId)
if (element) {
  // add listener
}

const locations = [{
    "location": "hauptbahnhof",
    "color": "Magenta"
  },
  {
    "location": "Kröpke",
    "color": "Yellow"
  },
  {
    "location": "KröpckeUhr",
    "color": "Green"
  },
  {
    "location": "nonExistingElement",
    "color": "Green"
  },
]

for (var i = 0; i < locations.length; i++) {
  var locationId = locations[i].location;
  console.log(locationId);
  const element = document.getElementById(locationId)
  if (element) {
    element.addEventListener("click", myFunction);

    function myFunction() {
      element.style.color = "red";
    }
  } else {
    // ID is not in the html elements
  }
}

<div id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id="Kröpke">Kröpke</div>
  <div id="example">no event on this</div>
  <div id="KröpckeUhr">Kröpcke Uhr</div>
  <div id="Drumstreet">Drumstreet</div>
</div>

Answer 2

Добавить прослушиватель кликов по документу и проверить, совпадают ли выбранные элементы

const locations = [
  {"location": "hauptbahnhof", "color": "Magenta"},
  {"location": "Kröpke", "color": "Yellow"},
  {"location": "KröpckeUhr", "color": "Green"},
];

const ids = locations.map(l => l.location);

document.addEventListener('click', function (e) {
   console.log(e.target.id);
   if (ids.indexOf(e.target.id) > -1) {
     console.log('Do something here');
   }
});

<div  id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id= "Kröpke">Kröpke</div>
  <div id = "KröpckeUhr">Kröpcke Uhr</div>
  <div id= "Drumstreet">Drumstreet</div>
</div>

Answer 3

Я не уверен, что правильно вас понял, но вы этого хотите?

for (var i = 0; i < locations.length; i++) {
  document.getElementById(locations[i].location).addEventListener("click", function(){
    //
  });
}