Javascript function for a php loop

Question

I have this situation:

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("commentDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

and the php code

<?php
echo "<table><tr  onclick='myFunction()'><td>Row A1</td></tr>"; //A1 row from my table
echo "<tr><td><div id='commentDIV' style='display:none'> Row B1</div></td></tr></table>"; // the B1 row show after click on the A1
?>

Everything works fine, when I click on the first row, the second appearance.

How can I use/modify my javascript function in this situation?

<?php
    $x=0;
    while($x<10){
        echo "<table><tr  onclick='myFunction()'><td>Row A$x</td></tr>"; //Ax row from my table
        echo "<tr><td><div id='commentDIV' style='display:none'> Row B$x</div></td></tr></table>"; // the Bx row must show after click on the Ax
        $x++;
    }
?>

Please help and save my day! Many thanks!

Well for one, id must be unique across the entire DOM (html document). So that affects how you setup a click handler and modify elements. — IncredibleHat
– IncredibleHat, Commented Jul 16, 2018 at 17:19

IncredibleHat · Accepted Answer · 2018-07-17 13:25:17Z

The problem is that you are using the same id "commentDIV" for all Divs so you should change the loop and function.

Add $x to div id originally known as commentDIV
Change the myFunction call to include the $x number
Add the id argument to the myFunction definition
Append the passed id to the getElementById value

Like this:

<?php 
$x=0;
while($x<10){
  echo "<table><tr  onclick='myFunction($x)'><td>Row A$x</td></tr>";
  //                                    ^^--- 2. add $x
  echo "<tr><td><div id='commentDIV_$x' style='display:none'> Row B$x</div></td></tr></table>";
  //                               ^^^--- 1. add $x
$x++;}
?>

The javascript code changes to this:

<script type="text/javascript">
    function myFunction(id) {
         //             ^^--- 3. add id
         var x = document.getElementById("commentDIV_" + id);
         //                                         ^ ^^^^^--- 4. append id
         if (x.style.display === "none") {
            x.style.display = "block";
         } else {
            x.style.display = "none";
         }
    }
</script>

Zakaria Acharki · Accepted Answer · 2018-07-16 17:41:05Z

id attribute should be unique at the document, try to change the duplicate ones by common classes like :

<?php
    $x=0;
    while($x<10){
        echo "<table><tr  onclick='myFunction(this)'><td>Row A$x</td></tr>"; //Ax row from my table
        echo "<tr><td><div class='commentDIV' style='display:none'> Row B$x</div></td></tr></table>"; // the Bx row must show after click on the Ax
        $x++;
    }
?>

NOTE: You should pass the 'this' object as an argument to your function.

Then in your js, you could use the passed argument to search for the related div using the class name self.nextElementSibling.querySelector(".commentDIV") and finally toggle the display like :

function myFunction(self) {
  var related_div = self.nextElementSibling.querySelector(".commentDIV");

  related_div.style.display = (related_div.style.display === 'none') ? 'block' : 'none'
}

<table border=1>
  <tr onclick='myFunction(this)'>
    <td>Row A1</td>
  </tr>
  <tr>
    <td>
      <div class='commentDIV' style='display:none'> Row B1</div>
    </td>
  </tr>

  <tr onclick='myFunction(this)'>
    <td>Row A2</td>
  </tr>
  <tr>
    <td>
      <div class='commentDIV' style='display:none'> Row B2</div>
    </td>
  </tr>
</table>

Wais Kamal · Accepted Answer · 2018-07-16 17:37:39Z

0

First of all, IDs need to be unique to function properly, so I would rather use classes.

As stated, this table will be echoed 10 times:

<table>
  <tr onclick="myFunction(this)">
    <td>Row A$x</td>
  </tr>
  <tr>
    <td>
      <div class="commentDIV" style="display:none">Row B$x</div>
    </td>
  </tr>
</table>

Next, modify the javascript such that the element gets passed as a parameter, then get the first child of the next element:

function myFunction(e) {
  var x = e.nextElementSibling.children[0];
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

edited Jul 16, 2018 at 17:37

answered Jul 16, 2018 at 17:30

Wais Kamal

6,2503 gold badges20 silver badges47 bronze badges

2 Comments

Zakaria Acharki Over a year ago

.children[0] isn't a good idea, if the column content change, the function will fail

IncredibleHat Over a year ago

Would e.nextElementSibling.children[0]; actually choose the correct tr -> td-> div? I'm actually twisting my brain to visualize that selector. I admit though, I'm spoiled rotten by jquery at this point =p

Collectives™ on Stack Overflow

Javascript function for a php loop

3 Answers 3

Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Related