Pass PHP array into JS

Question

I want to make a memory game but I don't know how to pass a value of an array from PHP into JS.

I need to pass some number into a JS variable but only get the first number of the table when the user clicks.

The numbers already exist inside inside a PHP array but I need to pass the number clicked in a JS variable

PHP code (to get numbers random):

$numbers = range(0, 9);
shuffle($numbers);

HTML and PHP code (Table):

<table width="200" border="1" id="tabla" style="visibility:visible" >
<tr>
<?php foreach($numbers as $key){ ?>
<td ><a href="#" onclick="validacion()" style="color:#000; text- decoration:none;"> <div class="container"> <h1 class="box" id="text"> <?php  echo $key; ?> </h1> </div> </a></td>
<?php } ?>
</tr>
</table>

JS code (Can I get ONLY the first number in the table?)

function validacion(){
var text=document.getElementById('text').innerHTML;
alert(text);
}

When I click on any number of the table I get the same first number. How would I fix this?

score 0 · Answer 1 · edited May 23 '17 at 12:23

IDs have to be unique, you can't have id="text" on every row of the table. document.getElementById("text") will always return the first element with that ID, not the one in the row the user clicks on.

Use class="text" instead. Then change your function to look for the element with that class in the current element. The HTML needs to pass the element to the validation function:

<a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">

Then the JS will be:

function validacion(elem) {
    var text = elem.getElementsByClassName("text")[0].innerHTML;
    alert(text);
}

Note also that putting a DIV inside an A is not valid in HTML 4.01. See Is putting a div inside an anchor ever correct?

Here's the full code:

function validacion(elem) {
  var text = elem.getElementsByClassName("text")[0].innerHTML;
  document.getElementById("alert").innerHTML = text;
}

<table>
  <tr>
    <td>
      <a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">
        <div class="container">
          <h1 class="box text" > 1 </h1> 
        </div>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">
        <div class="container">
          <h1 class="box text" > 2 </h1> 
        </div>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">
        <div class="container">
          <h1 class="box text" > 3 </h1> 
        </div>
      </a>
    </td>
  </tr>
</table>
Alert here:
<div id="alert"><div>

thanks for reply but this function getElementsByClassName no exist — Mauricio Verastegui Muñoz, Oct 24 '15 at 00:34

score 0 · Answer 2 · answered Oct 24 '15 at 00:10

You cannot do that..

<?php foreach($numbers as $key){ ?>
<td ><a href="#" onclick="validacion()" style="color:#000; text- decoration:none;"> <div class="container"> <h1 class="box" id="text"> <?php  echo $key; ?> </h1> </div> </a></td>
<?php } ?>

instead

<?php foreach($numbers as $key){
 echo '<td ><a href="#" onc...';
}?>

another thing,

function validacion(id){
var text=document.getElementById('text'+id).innerHTML;
alert(text);
}

and add the ID to the ID in the foreach loop : id=\'"text"+id\'

Pass PHP array into JS

2 Answers2