title: JavaScript onClick, getting data (id) from a table (populated from a database with PHP) through function and button
body: <p>I have a file which populates a table with data from a database, through PHP.
  It populates it like this:</p>
  
  <pre><code>$SQL = "SELECT m.id, m.nombre, m.descripcion, m.carga_horaria, c.nombre AS  carrera_nombre FROM materias m JOIN carreras c ON (m.carrera_id = c.id)";
  $resultado = $CONN-&gt;query($SQL);
  
  //Populating the table
  if($resultado-&gt;num_rows &gt; 0){
  while($row = $resultado-&gt;fetch_assoc()){
      echo "&lt;tr&gt;";  //row de comienzo
          echo "&lt;td&gt;{$row['nombre']}&lt;/td&gt;";
          echo "&lt;td&gt;{$row['descripcion']}&lt;/td&gt;";
          echo "&lt;td&gt;{$row['carga_horaria']} modulos&lt;/td&gt;";
          echo "&lt;td&gt;{$row['carrera_nombre']}&lt;/td&gt;";  //el alias de carrera.nombre
  
          //THIS PART IS THE ONE WITH THE ACTIONS
          echo '&lt;td&gt;&lt;div class="divActionsBtn"&gt;&lt;button class="btn btn-primary" value="'.$row['id'].'"&gt;Edit&lt;/button&gt; &lt;button class="btn btn-danger" value="'.$row['id'].'" data-toggle="modal" data-target="#myModal" id="deleteSubj" onClick="deleteSubjects();"&gt;Delete&lt;/button&gt;&lt;div&gt;&lt;/td&gt;';
      echo "&lt;/tr&gt;";
  }
  }else{
      echo "&lt;tr&gt;&lt;td&gt;No data&lt;td&gt;&lt;/tr&gt;";
  }
  </code></pre>
  
  <p>This has two action buttons, Edit and Delete. When any of these are pressed, it gets the id value of the row and works on its correspoding element. 
  In order to check functionality, I'm just trying to get the id of the row pressed and print it in console. I'm trying to use this function in a separate JavaScript file:</p>
  
  <pre><code>function deleteSubjects(){
  
      var subjectId = document.getElementById("deleteSubj").value;
      console.log(subjectId);
  }
  </code></pre>
  
  <p>If I do this, I only get "1" in console, no matter which element I press the "Delete button" for (so, 1 for any row)</p>
  
  <p>If I change it to this:</p>
  
  <pre><code>function deleteSubjects(){
  
      var subjectId = this.value;
      console.log(subjectId);
  }
  </code></pre>
  
  <p>Or this other option:</p>
  
  <pre><code>function deleteSubjects(){
  
      var deleteButton = document.getElementById("deleteSubj");
      var subjectId = this.value;
      console.log(subjectId);
  }
  </code></pre>
  
  <p>With these last two option, I get "undefined" in console.</p>
  
  <p>I've been given a piece of example code, it uses jQuery, and replacing its function I'm able to get the right id:</p>
  
  <pre><code>('#deleteSubj').on( "click", function() {
      var subjectId = $(this).val();
      console.log(subjectId);
  });
  </code></pre>
  
  <p>But I don't want to use jQuery :/ I mean, I have the whole project functions done in JavaScript, and I know what I'm trying to achieve must be able to be done in  plain JavaScript as well.</p>