How to access a particular element from JSTL ForEach tag using javaScript?

Question

I'm trying to make a booking website. On my jsp page, I have a jstl forEach that loops through multiple pictures from my database of various events. These images act as links, every image has a different link attached.

I also want to send location coordinates along with image to sort through database based on region, hence I am using Javascript.

How can I access an individual image in my javascript, to redirect to corresponding page?

I have tried using 'alt' of image, but that returns same value (alt of first image in loop) on every image in javaScript. However if I use href in anchor tags, the correct value is returned for every link. Is there a solution where I can use 'alt' in javaScript.

jsp:

<core:forEach items="${requestScope.Events}" var="Events">
 <div>
  <a onClick="getLocation()">
   <img alt="${Events.name}" src="/images/${Events.name).jpg">
  </a>
 </div>
</core:forEach>

Expected result is to get javascript:getLocation() have details of selected image so that it can be forwarded along with location coordinates to display nearby events according to user's location.

Answer 1

You can pass the name in the call to the event handler:

<core:forEach items="${requestScope.Events}" var="Events">
 <div>
  <a onClick="getLocation('${Events.name}')">
   <img alt="${Events.name}" src="/images/${Events.name).jpg">
  </a>
 </div>
</core:forEach>

Your handler function would then be modified to accept the event name as a parameter.

FWIW I'd use a <button> instead of <a> here.