Javascript function not working currently

user_19601554 0
Viewed 57

I have an HTML table where data is being displayed from the data table and where a function is being assigned with the use of an ID TAG that hides the <td> with the ID private-mode when you click on the button.

but the function only seems to work for the first row and not for the other rows I have checked the other rows with the inspect element function in chrome and they all have the ID private-mode

Can someone explain to me why its not working for the other rows?

Button:

<button onclick="privatemode()">Private mode</button>

html-table:

 <div class="cards card">
      <table class="table hoverTable">
        <tr>
          <th></th>
          <th>Omschrijving</th>
          <th>Bedrijf</th>
          <th>Betaalmethode</th>
          <th>Bedrag</th>
          
        </tr>
        
        <!-- PHP CODE TO FETCH DATA FROM ROWS -->
        <?php
            // LOOP TILL END OF DATA
            while($rows=$result->fetch_assoc())
            {
        ?>
        <tr>
          <!-- FETCHING DATA FROM EACH
                ROW OF EVERY COLUMN -->
          
          <th><input class="checkbox1" type="checkbox"></th>
          <td><?php echo $rows['Omschrijving'];?></td>
          <td><?php echo $rows['Bedrijf'];?></td>
          <td><?php echo $rows['Betaalmethode'];?></td>
          <td id="private-mode"><?php echo $rows['Bedrag'];?></td>

          
          
          
        </tr>
        <?php
            }
        ?>
      </table>
  
      </div>

Javascript:

   function privatemode() {
  var x = document.getElementById("private-mode");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
html-table datatable javascript
1 Answers

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. In your case, you seem to have multiple rows with same id. So your function always picks the first row. To change your working, you can use a common class name as a workaround to hide the content.

Here's an example:

function myFunction() {
  var elements = document.getElementsByClassName('private-mode');
  for (let element of elements) {
    if (element.style.display === "none") {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
}
<table class="table hoverTable">
  <tr>
    <th></th>
    <th>Omschrijving</th>
    <th>Bedrijf</th>
    <th>Betaalmethode</th>
    <th>Bedrag</th>
  </tr>
  <tr>
    <th><input class="checkbox1" type="checkbox" /></th>
    <td>Sample</td>
    <td>Sample</td>
    <td>Sample</td>
    <td class="private-mode">Content 1</td>
  </tr>
  <tr>
    <th><input class="checkbox1" type="checkbox" /></th>
    <td>Sample</td>
    <td>Sample</td>
    <td>Sample</td>
    <td class="private-mode">Content 2</td>
  </tr>
</table>
<button onClick="myFunction()">Private mode</button>

user_104039020
Related