Using PHP and Javascript to display unique ID of generated button

Question

I am currently building a stock market simulator and, on my main stock market menu, I have 15 'Buy' buttons for each individual company. I have generated the 15 buttons and stock names using the following code:

HTML and PHP:

for ($a = 0; $a < $length; $a++)
{
  echo "<tr>";
  echo "<td style = 'text-align:center;font-size:15pt'>" . $companyNames[$a] . "</td>";
  echo "<td style = 'text-align:center;font-size:15pt'>" . $companyTickers[$a] . "</td>";
  ?> <td style = "text-align:center;font-size:15pt" id = "<?php echo $priceIdentifiers[$a]; ?>"></td>
  <td style = "text-align:center;font-size:15pt" id = "<?php echo $lowPriceIdentifiers[$a]; ?>"></td>
  <td style = "text-align:center;font-size:15pt" id = "<?php echo $highPriceIdentifiers[$a]; ?>"></td>
  <td style = 'text-align:center;font-size:15pt'><button id = "<?php echo $a; ?>" onclick = "myFunction()" style = 'font-size:12pt'><strong>BUY</strong></button></td>
  <?php echo "</tr>";
}
  ?>

Where the value of $length = 15. I have further created a function in Javascript in an attempt to display the unique ID that was generated for each button (from $a) using the following code:

Javascript:

<script>
var a = <? echo json_encode($a); ?>;
function myFunction(){
  window.alert(a);
}
</script>

When I am pressing the buttons using the above code, every time I press a button it increments the value that is displayed to me each time (so for 5 button presses, the display is "5", for 8 it is "8").

When looking at an approach on a different post: JavaScript - onClick to get the ID of the clicked button, I included some of the code in the post and to test my results, I clicked on several random buttons and was greeted with "15" every time.

My target is for the program to display "1" when I press the top button or "4" when I press the fourth button and so on. What can I go about doing to fix this problem?

Possible duplicate of [JavaScript - onClick to get the ID of the clicked button](https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button) — Difster, Nov 27 '18 at 23:42
@Difster I investigated that post in my research and tried the above method, however when testing out the code the result, when pressing any of the buttons on my page, was "15". I believe that it must be to do with the fact that when pressing the button that $a is already equal to 15 but I am not aware of how to change it to its respective value depending on what button has been pressed. — Leo Chashchin, Nov 27 '18 at 23:44

score 1 · Accepted Answer · answered Nov 27 '18 at 23:51

1

I don't know PHP but what if you changed the onclick event to pass the value of $a to your JS function?

<td style = 'text-align:center;font-size:15pt'><button id = "<?php echo $a; ?>" onclick = "myFunction('<?php echo $a; ?>')" style = 'font-size:12pt'><strong>BUY</strong></button></td>

Then in the JS function take the value as a param

function myFunction(a){
  window.alert(a);
}

answered Nov 27 '18 at 23:51

Kelvin

333
2
7

Thank you, this solved the solution for me. I personally thought that $a was passed to my JS function when I wrote that same expression for my ID earlier but that did not work out for me. Thank you very much for your time. – Leo Chashchin Nov 27 '18 at 23:56
@LeoChashchin You should use miken32's answer. Learn about Event Listener Instead of this old way. – ICE Nov 28 '18 at 00:34

score 1 · Answer 2 · answered Nov 28 '18 at 00:23

You should really be using a library like jQuery to do things like this. Using attributes like onclick is a very outdated way to do things. Even without a library making things easy, it's still pretty simple to do this properly.

<?php for ($a = 0; $a < $length; $a++): ?>
    <tr>
        <td class="centered"><?=$companyNames[$a]?></td>
        <td class="centered"><?=$companyTickers[$a]?></td>
        <td class="centered" id="<?=$priceIdentifiers[$a]?>"></td>
        <td class="centered" id="<?=$lowPriceIdentifiers[$a]?>"></td>
        <td class="centered" id="<?=$highPriceIdentifiers[$a]?>"></td>
        <td class="centered">
            <button class="buybutton" data-identifier="<?=$a?>"><strong>BUY</strong></button>
        </td>
    </tr>
<?php endfor; ?>

Note I've used alternative syntax on the for loop and short echo tags to keep things neat when integrating PHP and HTML.

Now, in your script you can hook into that class name buybutton using something like this (again, much easier with a library helping you.)

<script>
var buttons = document.getElementsByClassName("buybutton");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function(e) {
      // this reads the value of the data-identifier attribute
      var identifier = this.dataset.identifier;
      window.alert(identifier);
  }, false);
}
</script>

The class names also provide a hook for CSS so you aren't repeating inline style rules over and over and over again.

Here's a live example:

var buttons = document.getElementsByClassName("buybutton");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function(e) {
      var identifier = this.dataset.identifier;
      window.alert(identifier);
  }, false);
}

.buybutton { font-weight: bold; color: blue; }

<table>
<tr>
  <td>Row 1</td>
  <td>
    <button class="buybutton" data-identifier="1">BUY</button>
  </td>
</tr>
<tr>
  <td>Row 2</td>
  <td>
    <button class="buybutton" data-identifier="2">BUY</button>
  </td>
</tr>
<tr>
  <td>Row 3</td>
  <td>
    <button class="buybutton" data-identifier="3">BUY</button>
  </td>
</tr>
</table>

Thank you for your response, I will start to learn about jQuery and how to integrate it into my code. — Leo Chashchin, Nov 28 '18 at 14:35

Using PHP and Javascript to display unique ID of generated button

2 Answers2