JavaScript onClick, getting data (id) from a table (populated from a database with PHP) through function and button

Question

I have a file which populates a table with data from a database, through PHP. It populates it like this:

$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->query($SQL);

//Populating the table
if($resultado->num_rows > 0){
while($row = $resultado->fetch_assoc()){
    echo "<tr>";  //row de comienzo
        echo "<td>{$row['nombre']}</td>";
        echo "<td>{$row['descripcion']}</td>";
        echo "<td>{$row['carga_horaria']} modulos</td>";
        echo "<td>{$row['carrera_nombre']}</td>";  //el alias de carrera.nombre

        //THIS PART IS THE ONE WITH THE ACTIONS
        echo '<td><div class="divActionsBtn"><button class="btn btn-primary" value="'.$row['id'].'">Edit</button> <button class="btn btn-danger" value="'.$row['id'].'" data-toggle="modal" data-target="#myModal" id="deleteSubj" onClick="deleteSubjects();">Delete</button><div></td>';
    echo "</tr>";
}
}else{
    echo "<tr><td>No data<td></tr>";
}

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:

function deleteSubjects(){

    var subjectId = document.getElementById("deleteSubj").value;
    console.log(subjectId);
}

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)

If I change it to this:

function deleteSubjects(){

    var subjectId = this.value;
    console.log(subjectId);
}

Or this other option:

function deleteSubjects(){

    var deleteButton = document.getElementById("deleteSubj");
    var subjectId = this.value;
    console.log(subjectId);
}

With these last two option, I get "undefined" in console.

I've been given a piece of example code, it uses jQuery, and replacing its function I'm able to get the right id:

('#deleteSubj').on( "click", function() {
    var subjectId = $(this).val();
    console.log(subjectId);
});

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.

Answer 1

You can use the click event to get the button information

function deleteSubjects(e){
     var subjectId = e.currentTarget.value;
     console.log(subjectId);
}

Answer 2

Solved! It was a simple mistake, which I've resolved after findng this thread --> Javascript Get Element Value

So my js functions ended up like this: function deleteSubjects(button){

var materiaId = parseInt(button.value);
console.log(materiaId);

}

And I added the "this" keyword to the function call on the onClick event. Extra: Decided to convert the value to integer to prepare it for the database.