Solution 1 :

When you create your while loop you can append the $testcount to the end of an ID for the button, this way each button will have its own unique ID, but still have a ‘template’ name that you can use in javascript.

<?php
$i = 0;
$testcount = 0;
while($testcount < 8) {
  echo '<button id="btn'.$testcount.'" onclick="test('.$testcount.')" class="btnT">Hello</button>';
  $testcount++;
}
?>

Afterwards you should get 7 buttons with ID’s btn1, btn2, btn3, btn4… etc

Then in Javascript you can run a function based off each button like this:

function test(x) {
    var myButton = document.getElementById('btn' + x);
    myButton.classList.add("test1");
    // Any more JS logic you have
}

When you click, for example, button #2, the ID of that button should be ‘btn2’. The onclick of the button will send the number ‘2’ as an argument to the JS function. The variable myButton will get the element by the ID of the btn + the number you gave it to create a string like ‘btn2’, then based off that you now know which button was pressed, and you are able to run actions based off that. Using your example you added the class ‘test1’ to that button.

Problem :

`<?php
$i = 0;
$testcount = 0;
while($testcount < 8) {
  if($i == 0) {
    ?>
    <input id="info" type="hidden" value="hi">
    <?php
  } else if ($ == 1) {
    ?>
    <input id="info" type="hidden" value="test">
    <?php
  }
  ?>
  <button onclick="test()" class="btnT">Hello</button>
  <?php
  $testcount++;
}
?>
<style>
  .test1 {
     background-color: cyan;
     color: black;
  }
</style>
<script type="text/javascript">
  function test () {
     $(".btnT").addClass("test1");
  }
</script>`

Ignore the if statement, I have not yet implemented it to the js

I am displaying buttons using php while loop without any text nor class. A class is determined using an if statement using php where they will hold a hidden input value which will then be pushed to javascript which will then add a class depending on the value of the hidden input, I am then trying to remove and add another class to only one individual button displayed in the while loop. I either get the first button to get the change, or it changes all of the buttons, and not the individual button that I clicked. Please help, Thank you!

My biggest question is how to make each button inside the while loop to have the event occur individually, instead of all of them. I know that it is because I have the code to add a class to the button class, I tried replacing the button class with an id, but that way, only the first button will get the new class added and not the rest of the buttons. Hopefully there is a solution for each button to act separately

Comments

Comment posted by Shape

It would be good it you showed us your code.

Comment posted by cyw

If I understand correctly, you want the function to run individually on each button? You can potentially append the $testcount to the end of your ID’s for each button, that way each button will have a unique ID. Also pass the $testcount as an argument to your JS function and run a while loop within JS with the same incremental counter to effect the rest of your buttons.

Comment posted by Ven

@dune184 Thank you!, yes that is what Im trying to do. I think I understand what you mean, so does this mean that I have to use id instead of class? Also if I add the $testcount at the end of each button, then that means that for example the id is going to be btn1,btn2, btn3…, but after when I want to get the value of $testcount, dont I have to use the document.getElementById? if each button has a unique id, then how do I get the value of $testcount?

Comment posted by cyw

Yes you would get it by its ID, you can achieve this by passing the $testcount as an argument to the onclick function you have set on your buttons. By passing this argument through the function you can identify which button is being clicked and take action based off that, I would write the answer here but I’m still not quite sure if that’s exactly what you want yet

Comment posted by Ven

@dune184 yeah that is what I am trying to do. I would appreciate it if you could write a code example. Thank you very much!

Comment posted by Ven

Got it! Thank you so much!

By