1
votes

L'événement setAttribute onclick n'est pas défini et s'exécute avant que le bouton ne soit cliqué

Je crée une table grossière à travers des objets de tableau, deux noms de champs et une classe et un bouton d'envoi ajoute les deux champs avec deux boutons modifier et supprimer, lorsque j'ajoute un attribut défini sur le bouton cliquez pour supprimer, il s'exécute sur l'événement ajouter bouton, pas le bouton de suppression.

J'ai essayé document.getElementById (xyz) .setAttribute ('onclick', function) cela ne résout pas mon problème.

Je veux exécutez la fonction lorsque vous appuyez sur le bouton del et que l'événement requis sera déclenché.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="javascript:void(0)" onsubmit="addStudent('name','classN','table');">
  name:
  <input type="text" name="name" id="name" /> <br /> class:
  <input type="text" name="classN" id="classN" /> <br />

  <input type="submit" value="add" />
</form>
<table id="table" border="2px solid black">
  <tr>
    <th>name</th>
    <th>class</th>
    <th>action</th>
  </tr>
</table>

var arobj = [];

function load(arr) {
  for (var i = 0; i < arr.length; i++) {
    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode("");
    var classN = document.createTextNode("");
  }
}

function addStudent(idn, idc, tab) {
  var obj = {};

  var row = document.createElement("tr");
  var name = document.createElement("td");
  var classN = document.createElement("td");

  var nameValue = document.createTextNode(
    document.getElementById(idn).value
  );
  obj.nameVal = nameValue;
  var classValue = document.createTextNode(
    document.getElementById(idc).value
  );
  obj.classVal = classValue;

  arobj.push(obj);

  row.setAttribute("id", (arobj.length - 1).toString());

  var del = document.createElement("button");
  del.innerHTML = "delete";
  var edit = document.createElement("button");
  edit.innerHTML = "edit";
  var act = document.createElement("td");

  del.setAttribute("id", "btn" + (arobj.length - 1).toString());
  var delbtn = del.getElementById("btn" + (arobj.length - 1));
  console.log(delbtn);
  act.appendChild(del);

  act.appendChild(edit);
  name.appendChild(nameValue);
  classN.appendChild(classValue);
  row.appendChild(name);
  row.appendChild(classN);
  row.appendChild(act);
  document.getElementById(tab).appendChild(row);
  console.log(arobj);
  console.log(row.getAttribute("id"));
}

function delet() {
  alert("function ran");
}

javascript events

0 commentaires

3 Réponses :

0
votes

1) utilisez:

del.addEventListener('click', delet);

au lieu de:

 var delbtn = del.getElementById("btn" + (arobj.length - 1));

2) ajoutez également du code:

  var delbtn = document.getElementById("btn" + (arobj.length - 1));

0 commentaires

0
votes

Modifié du code, s'il vous plaît voir le commentaire suivant, BTW: il est efficace d'utiliser les bibliothèques jQuery, react, Vue etc. lors de la résolution de ces données Dom.

function addStudent(idn, idc, tab) {
    var obj = {};

    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode(
      document.getElementById(idn).value
    );
    obj.nameVal = nameValue;
    var classValue = document.createTextNode(
      document.getElementById(idc).value
    );
    obj.classVal = classValue;

    arobj.push(obj);

    row.setAttribute("id", (arobj.length - 1).toString());

    var del = document.createElement("button");
    del.innerHTML = "delete";
    var edit = document.createElement("button");
    edit.innerHTML = "edit";
    var act = document.createElement("td");

    del.setAttribute("id", "btn" + (arobj.length - 1).toString());       
    var delbtn = document.getElementById("btn" + (arobj.length - 1));

    // here delbtn is null, it have not add to document yet!;
    console.log('delbtn',delbtn);

    act.appendChild(del);

    act.appendChild(edit);
    name.appendChild(nameValue);
    classN.appendChild(classValue);
    row.appendChild(name);
    row.appendChild(classN);
    row.appendChild(act);
    document.getElementById(tab).appendChild(row);
    console.log(arobj);
    console.log(row.getAttribute("id"));

    // delbtn is ready now;
    delbtn = document.getElementById("btn" + (arobj.length - 1));
    console.log('delbtn',delbtn);   // here is ok

    //add click event
    del.addEventListener("click",delet);
  }

0 commentaires

0
votes

Vous devez lier l'événement cliquez sur le bouton Supprimer après avoir ajouté la ligne dans le DOM:

    <form
      action="javascript:void(0)"
      onsubmit="addStudent('name','classN','table');">
      name:
      <input type="text" name="name" id="name" /> <br />
      class:
      <input type="text" name="classN" id="classN" /> <br />

      <input type="submit" value="add" />
    </form>
    <table id="table" border="2px solid black">
      <tr>
        <th>name</th>
        <th>class</th>
        <th>action</th>
      </tr>
    </table>

var arobj = [];
function load(arr) {
for (var i = 0; i < arr.length; i++) {
      var row = document.createElement("tr");
      var name = document.createElement("td");
      var classN = document.createElement("td");

      var nameValue = document.createTextNode("");
      var classN = document.createTextNode("");
    }
}

function addStudent(idn, idc, tab) {
    var obj = {};

    var row = document.createElement("tr");
    var name = document.createElement("td");
    var classN = document.createElement("td");

    var nameValue = document.createTextNode(
      document.getElementById(idn).value
    );
    obj.nameVal = nameValue;
    var classValue = document.createTextNode(
      document.getElementById(idc).value
    );
    obj.classVal = classValue;

    arobj.push(obj);

    row.setAttribute("id", (arobj.length - 1).toString());

    var del = document.createElement("button");
    del.innerHTML = "delete";
    var edit = document.createElement("button");
    edit.innerHTML = "edit";
    var act = document.createElement("td");

    del.setAttribute("id", "btn" + (arobj.length - 1));

    act.appendChild(del);
    act.appendChild(edit);
    name.appendChild(nameValue);
    classN.appendChild(classValue);
    row.appendChild(name);
    row.appendChild(classN);
    row.appendChild(act);
    document.getElementById(tab).appendChild(row);

    document.getElementById("btn" + (arobj.length - 1)).addEventListener('click', delet);
}

function delet() {
    let row = this.parentNode.parentNode;
    row.parentNode.removeChild(row);
    alert("function ran");
}

0 commentaires