CODEWITHSUNDEEP
javascriptarraysevent-listener
HamiD
HamiD

Reputation: 1090

How to add Eventlistener for all Elements in the page which thier ids are inside my Array using javascript

I have elements with Ids in my page. Also I have an Array, which includes the Ids.

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>

It gives me all locations out. Now I want to add Eventlistener for all Objects in my page which the Array includes thier Ids using javascript.

Upvotes: 0

Views: 70

Answers (3)

Mara Black
Mara Black

Reputation: 1751

Get element by id and add event listener wit function on it element.addEventListener("click", myFunction); For demo purpose the corresponding div will have red color at click.

EDIT after the commnent

Check if the element exist after was search by id:

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>

Upvotes: 2

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22895

Add click listener on document and the check if clicked items matches

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>

Upvotes: 1

Noam L
Noam L

Reputation: 119

I'm not sure i understood you correctly, but is this what you want?

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

Upvotes: 1

Related Questions