Why does my script only act on the first element with a particular ID value?

Question

I have a query that produces a number of DIV id="toggle_panel" I know I can effectively change the ID of the DIV dynamically.

Below is the script, straight from w3schools, which works great out of the box...for the first DIV and first DIV only. How do I apply a dynamic variable from the query to my script?

Second question: How do I get it so the DIV are hidden by default?

function myFunction() {
  var x = document.getElementById("toggle_panel");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Thank you

I have this in my php: echo '
';
– Jwrbloom Apr 06 '20 at 21:38 — Jwrbloom, Apr 06 '20 at 21:38

score 0 · Answer 1 · answered Apr 06 '20 at 20:12

For your first question, using a class would be more appropriate to tag a collection similar html elements.

So your divs should look something like this:

<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>

You could then use document.getElementsByClassName('toggle_panel') to access them.

Also to hide them by default, you could use css to target your classes as shown below.

.toggle_panel {
   display: none;
}

score 0 · Answer 2 · answered Apr 06 '20 at 20:13

0

As mentioned in the comments, you can only have one instance of an ID. To achieve the result you want you will have to change the <div id="toggle_panel">content</div> to <div class="toggle_panel">content</div>. Then use the following javascript:

function myFunction() {
  var panels = document.getElementsByClassName("toggle_panel");
  for(var i = 0; i < panels.length; i++) {
    var panel = panels[i];   
    if (panel.style.display === "none") {
       panel.style.display = "block";
    } else {
       panel.style.display = "none";
    }
  }

}

answered Apr 06 '20 at 20:13

Chiel

1,324
1
11
30

Thank you for all the responses. I'll start testing them out. – Jwrbloom Apr 06 '20 at 21:08
Where do I put the Javascript Function? I tried putting it above the – Jwrbloom Apr 06 '20 at 21:09
@Jwrbloom Normally you would want to put the JS code within the tags or in a separate .js file. But i dont know about the structure of the entire code so it might be at a different position. I would try to put it within the tags first. – Chiel Apr 06 '20 at 21:16
Do I access the .js file the same way I'd access a .php file? With an include or require? – Jwrbloom Apr 06 '20 at 21:21
@Jwrbloom it doenst work like PhP include or require: that happens in the back-end. Put the following in the : then you can use the functions created in that file in your html code – Chiel Apr 06 '20 at 21:28
I keep getting a "headers have already been sent" error when I put it before the PHP tag. – Jwrbloom Apr 06 '20 at 21:36
@Jwrbloom Try to avoid placing any html or other code before your first php lines. See https://stackoverflow.com/questions/8028957/how-to-fix-headers-already-sent-error-in-php for more info. These errors are outside the scope of this question – Chiel Apr 06 '20 at 22:08
Right. I was following suggestions of how to utilize it. Where should I put it? I've tried echoing it, and it handles may #ID variable very well. ``` var x = document.getElementById("update_panel_'. $current_player .'");``` – Jwrbloom Apr 06 '20 at 22:28
@Jwrbloom As i’ve no knowledge of the rest of your code, i’m unable to answer that question, sorry. – Chiel Apr 06 '20 at 22:44
@Jwrbloom it seems to me, when I look at your code that you are echoing the function myFunction() multiple times. In the end result you will have a lot of myFunction() in your file. That doesn't work. – Chiel Apr 07 '20 at 08:43
I changed to your code and changed from using the ID to the class. It's still not working. I've still yet to figure out where to put the script where it works or doesn't give me an error. – Jwrbloom Apr 07 '20 at 10:32

score -1 · Answer 3 · edited Feb 07 '22 at 17:11

-1

I think you should use querySelectorAll('toggle_panel') and your code will be like this:

Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
  element.display = 'none'
})

edited Feb 07 '22 at 17:11

Sebastian Simon

18,263
7
55
75

answered Apr 06 '20 at 20:19

Kirill Fando

11
2

Where should I put that in the my PHP file? In the While loop? – Jwrbloom Apr 06 '20 at 22:43
`document.querySelectorAll('toggle_panel')` gets all `` elements. Without telling the OP that IDs must be unique and therefore should be classes instead, and which selector to use for classes, this answer is not useful. Other than that `Array.from(document.querySelectorAll(`…`)).forEach(`…`);` is a good pattern to use. – Sebastian Simon Feb 07 '22 at 17:14

Why does my script only act on the first element with a particular ID value?

3 Answers3