Class Method As Event Handlers Javascript-CodePudding

This is my assignment : " the modif_function, view_function and add_function methods are launched when the corresponding ACTION button is clicked. The corresponding buttons are only visible if the methods have been supplied by the user by a function. "

I've been trying for many hours without success.

class Table {
  id_zone = "";
  class_table = "";
  data = "";
  header = "";
  class_modif = "";
  class_supp = "";
  class_vue = "";
  icone_modif = "";
  icone_supp = "";
  icone_vue = "";

  constructor(
    id_zone = "",
    class_table = "",
    data = "",
    header = "",
    class_modif = "",
    class_supp = "",
    class_vue = "",
    icone_modif = "",
    icone_supp = "",
    icone_vue = ""
  ) {
    this.id_zone = id_zone;
    this.class_table = class_table;
    this.data = data;
    this.header = header;
    this.class_modif = class_modif;
    this.class_supp = class_supp;
    this.class_vue = class_vue;
    this.icone_modif = icone_modif;
    this.icone_supp = icone_supp;
    this.icone_vue = icone_vue;
  }
  generer = () => {
    if (this.id_zone == "") {
      throw new Error(
        "Pour générer une table, il faut préciser la proprieté id_zone."
      );
    } else {
      var table =
        "<table class='"  
        this.class_table  
        "'>"  
        "<tbody>"  
        "<tr>"  
        "<th>"  
        donneesHeader[0]  
        "</th>"  
        "<th>"  
        donneesHeader[1]  
        "</th>"  
        "<th>"  
        donneesHeader[2]  
        "</th>"  
        "</tr>"  
        "<tr></tr>";
      $(this.data).each(function () {
        table  =
          "<tr>"  
          "<td>"  
          $(this)[0]  
          "</td>"  
          "<td>"  
          $(this)[1]  
          "</td>"  
          "<td>"  
          "<button type='button' class='"  
          tableFils.class_vue  
          " "  
          tableFils.icone_vue  
          "' "  
          "value="  
          $(this)[0]  
          "*"  
          $(this)[1]  
          "></button>"  
          "<button type='button'"  
          " class='"  
          tableFils.class_modif  
          " "  
          tableFils.icone_modif  
          "' value="  
          $(this)[0]  
          "*"  
          $(this)[1]  
          "></button>"  
          "<button type='button' class='"  
          tableFils.class_supp  
          " "  
          tableFils.icone_supp  
          "' value="  
          $(this)[0]  
          "*"  
          $(this)[1]  
          ">"  
          "</button></td>";
      });
      table  = "</tr></tbody></table>";
      $("#zoneTable").html(table);
    }
  };

  fonction_modif = () => {};
         //What to write here
  fonction_supp = () => {};

  fonction_vue = () => {};
}

function supprRegion() {
  alert("hello world 1");
}

function modifRegion() {
  alert("hello world 2");
}

function vueRegion() {
  alert("hello world 3");
}

let donnees = [
  [1, "Ain"],
  [2, "Aisne"],
  [3, "Allier"],
  [4, "Alpes-de-Haute-Provence"],
  [5, "Hautes-Alpes"],
  [6, "Alpes-Maritimes"],
  [7, "Ardèche"],
  [8, "Ardennes"],
  [9, "Ariège"],
  [10, "Aube"],
  [11, "Aude"],
  [12, "Aveyron"],
];

let donneesHeader = ["Code", "Nom du département", "Actions"];

let tableFils = new Table();
$(document).ready(function () {
  tableFils.id_zone = $("#zoneTable");
  tableFils.class_table = "table table-dark table-hover";
  tableFils.data = donnees;
  tableFils.class_modif = "mod_region";
  tableFils.class_supp = "supp_region";
  tableFils.class_vue = "vueRegion";
  tableFils.icone_modif = "btn btn-info btn-sm fas fa-pencil-alt fa-sm";
  tableFils.icone_supp = "btn btn-danger btn-sm fas fa-trash-alt fa-sm";
  tableFils.icone_vue = "btn btn-success btn-sm fas fa-eye fa-sm";
  tableFils.fonction_modif = modifRegion;
  tableFils.fonction_supp = supprRegion;
  tableFils.fonction_vue = vueRegion;

  tableFils.generer();
});

HTML:

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <!-- CDN CSS de BOOTSTRAP  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


    <!-- CDN de FONTAWSOME pour les ICONES  -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
</head>

<body>
    <div id="zoneTable"></div>

    <!-------------------------------------
        CDN JS pour BOOTSTRAP  
    --------------------------------------->
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <!-------------------------------------
        Nos fichiers JS  
    --------------------------------------->
    <script  src="assets/main.js">
        
    </script>
</body>

</html>

So, when there's a click on the modif, supp or vue icons, I get a simple alert. But I cannot change this : " fonction_modif = modifRegion; "

CodePudding user response：

Delete this:

  fonction_modif = () => {};
         //What to write here
  fonction_supp = () => {};

  fonction_vue = () => {};

And add this to properties of the class:

 fonction_modif = null;
 fonction_supp = null;
 fonction_vue = null;

Now, you already can assign a funtion to the properties of the tableFils object, and type the call inside class code, example, as onclick inside a html element of generer function:

this.fonction_modif()