JavaScript - loop in button in forEach loop

Question

What I'm trying to do is have an image slider with buttons on the bottom of the image that will display corresponding information of the image in a modal.

<div class=swipeManual>
<c:forEach var = "tempCustomer" items = "${customers}">
<img id="imgS" src="${pageContext.request.contextPath}/resources/images/${tempCustomer.image}"  style="z-index:-2" >
<button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button>
<div id="myModal" class="modal">

 <!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>${tempCustomer.description}</p>
</div>

</div>

</c:forEach>

Here is the JavaScript

<script>

var buttons = document.querySelectorAll('.buttonImg');

function clickHandler(em) {
var modal = document.getElementById(em);    
modal.style.display = "Block";
}

for (var i = 0; i < buttons.length; i++) {
(function () {

    var but = buttons[i].parentNode.id;

    buttons[i].addEventListener("click", function() { clickHandler(but)}, false);
    
}()); // immediate invocation
}


</script>

The problem is that only the first button works on the carousel, that is to open up the modal with the images's description, and the rest doesn't work. I think I'm looping the buttons incorrectly because only the first button works.

Image 1

Image 2

Im really sorry @brk the problem is that only the first button works on the carousel, that is to open up the modal with the images's description, and the rest doest not work — masair, Nov 18 '17 at 10:39
I think I'm looping the buttons incorrect because only the first button works. Can you please solve this. — masair, Nov 18 '17 at 10:42
You have tagged your question with jquery but are not using it at all. Would you be interested in a jquery type answer? This could simplify your code quite a bit. Also, I have problems understanding your intentions: You apparently want to display the parent element of a clicked button whenever it is clicked. But that requires this element to have been visible in the first place. So, what is the point here? And another point: Where do you define the array `elem`? — Carsten Massmann, Nov 18 '17 at 11:38
@cars10m Please if you could simplify the code i would be more than interested in learning it. What I'm simply trying to create is an Image slider that has buttons on the image which will display the image's information from the database using Spring in a modal . — masair, Nov 18 '17 at 11:46
@cars10m you can look at the image for visualization. It has four images that is not separated distinctly but the button appears only when you hover. — masair, Nov 18 '17 at 11:47

score 0 · Answer 1 · answered Nov 18 '17 at 10:44

0

the problem is that only the first button works on the carousel, that is to open up the modal with the images's description, and the rest doest not work

The reason is because of this line

var btn = document.getElementsByClassName("buttonImg myBtn")[0];

btn.onclick = function() {
modal.style.display = "block";
}

document.getElementsByClassName("buttonImg myBtn")[0] will only give the first element,So no way the events is attached to the other buttons.

Use document.querySelectorAll('.buttonImg').

This will give a collection(simmilar to arraylist). Loop over that arrayList and attach cick event to all the event

answered Nov 18 '17 at 10:44

brk

48,835
10
56
78

@masair check this example https://stackoverflow.com/questions/19586137/addeventlistener-using-for-loop-and-passing-values – brk Nov 18 '17 at 11:01
I've tried what you've said @brk but it is not working. can you check out my edit – masair Nov 18 '17 at 11:05

Carsten Massmann · Answer 2 · 2017-11-18T15:16:56.623

Maybe this is something that is helpful to you as a starting point?

I tried to emulate your row of pictures since there is no Spring MVC on stackoverflow. Please forgive me for not formatting things properly. This is only meant as a principle sketch. I eliminated the ids from your elements as these would not be unique any more inside the loop.

The actual jquery part is very simple: I bind a click event to all buttons of class="myBtn" and inside the event function I handle the action:

make all modals invisible
make the current modal visible again (.show())

$(function(){
 $('.myBtn').click(function(){
   $('.modal').hide();      // first: hide *all* modals
   // $(this).next().show() // then: show the one next to the button
   // or in a general case, when div.modal can not
   // be guaranteed to be "next" to the button:
   $('.modal',this.parentNode).show()
 })  
})

.sideways {vertical-align:top;display:inline-block;}
.modal {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="swipeManual">
<div class="sideways">
 <img src="http://www.publicdomainpictures.net/pictures/240000/t2/halloween-2017-wallpaper.jpg"  style="z-index:-2" ><br>
 <button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button>
 <div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
   <span class="close">&times;</span>
   <p>description 1</p>
  </div>
 </div>
</div>
<div class="sideways">
 <img src="http://www.publicdomainpictures.net/pictures/210000/t2/boat-in-caribbean-14884763094mZ.jpg"  style="z-index:-2" ><br>
 <button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button>
 <div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
   <span class="close">&times;</span>
   <p>description 2</p>
  </div>
 </div>
</div>
<div class="sideways">
 <img src="http://www.publicdomainpictures.net/pictures/220000/t2/winter-scene-1494682117gMU.jpg"  style="z-index:-2" ><br>
 <button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button>
 <div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
   <span class="close">&times;</span>
   <p>description 3</p>
  </div>
 </div>
</div>
</div>

JavaScript - loop in button in forEach loop

2 Answers2