Can't get the values of my table (getElementById not working)

Question

I'm trying to get a line of a dynamic table once the " reserver" button is clicked (or the line itself is clicked 'if that matters')but the 'getElementById' doesn't return anything ( i want to display them in an input) here is the code

HTML / PHP

<div class="form1">
            <div>
            <label>Code creneau1</label>
            <input type="text" id="nop" name='nop'>
            <label>Code creneau2</label>
            <input type="text" id="seh" name='seh'>
            <label>Code creneau3</label>
            <input type="text" id="row" name='row'>
            <label>Code creneau4</label>
            <input type="text" id="name" name='name'>
            
            </div>
        <table class="table table-striped" id="res">
        <thead>
            <tr>
                <th>code salle</th>
                <th> type </th>
                <th>etage</th>
                <th>capacité</th>
                <th> action</th>
                
                
            </tr>
        </thead> 
 <tbody><?php
        while ($donnees = $requete->fetch() and $donnees2 = $requete2->fetch())
                 {
                    $donnees_ar=$_POST['date'];
                    $code_cr=$_POST['heure'];
                // echo $donnees2['id_res'].'<br>';
              
            
                 if($donnees['code_salle']!=$donnees2['code_salle'] and $donnees2['date_res']=$_POST['date']){
 echo "<tr id='try'>

                <td >".$donnees['code_salle']."</td>
                <td >".$donnees['type_salle']."</td>
                <td >".$donnees['capacity']."</td>
                <td >".$donnees['etage']."</td>
                
                <td>
                  <a href='#0' id='he' class='cd-popup-trigger'>reserver</a>
                </td> 
            </tr>";
          }
        }; 
      }
         ?>

the JS

    <script src="js/main.js"></script>
   <script>
        var tbl= document.getElementById("res");
        for(var x=1;x<tbl.rows.length;x++ ){
            tbl.rows[x].onclick =function {
               document.getElementById('name').value=this.cells[0].innerHTML;
               document.getElementById('row').value=this.cells[1].innerHTML;
               document.getElementById('seh').value=this.cells[2].innerHTML;
               document.getElementById("nop").value=this.cells[3].innerHTML;

            }
        }
    </script>

Answer 1

You have been declared the JavaScript inside the JS file itself. in this case, The JS file Won't run for your HTML and won't affect anything written in your HTML. Also, you have declared your onClick function in the wrong way. To do this, you need to move the tag inside your HTML. For a better demonstration:

var table= document.getElementById("res");

if (table != null) {
    for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++)
        table.rows[i].cells[j].onclick = function () {
            tableText(this);
        };
    }
}

function tableText(tableCell) {
    alert(tableCell.innerHTML);
}

<div class="form1">
            <div>
            <label>Code creneau1</label>
            <input type="text" id="nop" name='nop'>
            <label>Code creneau2</label>
            <input type="text" id="seh" name='seh'>
            <label>Code creneau3</label>
            <input type="text" id="row" name='row'>
            <label>Code creneau4</label>
            <input type="text" id="name" name='name'>
            
            </div>
        <table class="table table-striped" id="res">
        <thead>
            <tr>
                <th>code salle</th>
                <th> type </th>
                <th>etage</th>
                <th>capacité</th>
                <th> action</th>
                
                
            </tr>
        </thead> 
 <tbody>
 <?php
        while ($donnees = $requete->fetch() and $donnees2 = $requete2->fetch())
                 {
                    $donnees_ar=$_POST['date'];
                    $code_cr=$_POST['heure'];
                // echo $donnees2['id_res'].'<br>';
              
            
                 if($donnees['code_salle']!=$donnees2['code_salle'] and $donnees2['date_res']=$_POST['date']){
 echo "<tr id='try'>

                <td >".$donnees['code_salle']."</td>
                <td >".$donnees['type_salle']."</td>
                <td >".$donnees['capacity']."</td>
                <td >".$donnees['etage']."</td>
                
                <td>
                  <a href='#0' id='he' class='cd-popup-trigger'>reserver</a>
                </td> 
            </tr>";
          }
        }; 
      }
         ?>