Trouble getting JavaScript to run multiple times on click for button

Question

Problem: On the html page, it is able to run the JS file once (allow a the modal to pop out and display the contents) however the button "Full Listing" is only able to work on the first option and each page (different search which filters the rows returned). Every other click of full listing button other than the first does not do anything.

Button and JS which is a part of the same php file

 <script> var modal = document.getElementById("Modal");

// Get the button that opens the modal
var btn = document.getElementById("Button");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

Please post the part containing the element with ID Button — Ken Lee
– Ken Lee, Commented Oct 15, 2021 at 1:56
@Ken Is this what you mean? <button id="Button">Full Listing</button>. That's what I get when copying the element on my chrome console. Sorry for my ignorance, I'm new to web development so all this terminology is new to me. Edit: i.imgur.com/HJABAgP.png — Kaiser
– Kaiser, Commented Oct 15, 2021 at 1:59

jet_24 · Accepted Answer · 2021-10-15 02:07:54Z

1

An ID is expected to be unique. The DOM will only qualify the first ID = 'Button'. You will need to use class="Button"

then use:

var btn = document.getElementsByClassName("Button")

This also applies to ID="Modal". It will have to be changed to a class if every row has it's own modal.

The tricky part will be to associate which button shows/hides which modal. There's many different ways this can be done. I would show one way here, but you're not using jQuery so I'm not familiar with doing it with document objects.

answered Oct 15, 2021 at 2:07

jet_24

6564 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaiser Over a year ago

That worked! Thank you so much. They're all viewing without clicking now though? Not quite sure how to fix this.

jet_24 Over a year ago

Yes, that's what I was referring to in my answer when I mentioned "The tricky part..." Basically your btn.onclick function is going to show all elements with class="modal". You need to tell it to show only one modal. Usually the modal will be a hidden div next to the button (like a neighbor), and then whichever button is clicked, you show it's neighbor.

Collectives™ on Stack Overflow

Trouble getting JavaScript to run multiple times on click for button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related