Пропустить PHP-массив в JS

Question

Я хочу сделать игру с памятью, но я не знаю, как передать значение массива из PHP в JS.

Мне нужно передать некоторое число в переменную JS, но только первый номер таблицы, когда пользователь нажимает.

Числа уже существуют внутри внутри массива PHP, но мне нужно, чтобы передать номер щелкнул в JS переменной

код PHP (чтобы получить число случайных):

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

HTML и PHP код (Таблица):

<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 код (Могу ли я получить только первый номер в таблице)

?

Когда я нажимаю на любой номер таблицы, я получаю тот же самый первый номер. Как я могу это исправить?

Answer 1

ID должны быть уникальными, вы не можете иметь id="text" на каждой строке таблицы. document.getElementById("text") всегда будет возвращать первый элемент с этим идентификатором, а не тот, в который пользователь нажимает.

Используйте вместо этого class="text". Затем измените свою функцию, чтобы искать элемент с этим классом в текущем элементе. HTML должен передать элемент в функции проверки:

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

Тогда JS будет:

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

Следует также отметить, что помещение DIV внутри A не действует в HTML 4.01. См Is putting a div inside an anchor ever correct?

Вот полный код:

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>

Answer 2

Вы не можете сделать это ..

<?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 } ?> 

вместо

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

другое дело,

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

и добавить идентификатор идентификатору в цикле Еогеасп: ID = \ 'текст "+ ID \'