Onclick nie działa w środku HTML

Question

Generuję sobie tabelkę z przyciskiem Usuń gdzie się usunie dany rekord.

  for (let i = 0; i < words.length; i++) {
        let elem = words[i];
        document.querySelector('#tablebody').innerHTML += `<td>${elem.id}</td> 
        <td>${elem.question}</td> 
        <td>${elem.answer}</td> 
        <td>${elem.counter}</td> 
        <td><button class="btn btn-danger onclick="console.log('fasfdafsd')">Usuń</button></td>`
    }

Tutaj nie reaguje onclick - maksymalnie upraszczam żeby było wiadomo o co chodzi. 

Postaram się nie używać tutaj onclick , ale i tak zastanawiam się czemu to nie działa

Answer 1

Do usuwania poszczególnych  wierszy w tabeli proponuję użyć Event Delegation

 

przykład

<style>
  table {
    width: 500px;
    max-width: 500px;
  }
  th, td {
    text-align: center;
    font: 400 0.9em/1.1 system-ui;
    padding: 0.25em 0.5em;
    color: white;
  }
  th:first-child {
    width: 1em;
    max-width: 1em;
  }
  th:last-child {
    width: 4em;
    max-width: 4em;
  }
  th {
    text-transform: capitalize;
    font-variant: small-caps;
    background-color: black;
  }
  tbody tr {
    cursor: default;
    transition: 
      background 0.5s, 
      opacity 0.8s 0.2s,
      transform 1s cubic-bezier(0.5,-0.8,0.25,1.4);
  }
  tbody tr:nth-child(even) {
    background-color: rgba(0,0,0,0.6);
  }
  tbody tr:nth-child(odd) {
    background-color: rgba(0,0,0,0.5);
  }
  tbody tr:hover {
    background-color: rgba(0,0,0,0.8);
  }
  tr.hide {
    opacity: 0;
    transform: scale(0);
  } 
</style>

<table id="words">
  <thead>
    <tr>
      <th>id</th>
      <th>question</th>
      <th>answer</th>
      <th>counter</th>
      <th><!-- button --></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  const words = [
    { id:1, question:'question1', answer: [ 'answer1.1', 'answer1.2', 'answer1.3' ], counter:2 },
    { id:2, question:'question2', answer: [ 'answer2.1', 'answer2.2', 'answer2.3' ], counter:3 },
    { id:3, question:'question3', answer: [ 'answer3.1', 'answer3.2', 'answer3.3' ], counter:1 },
    { id:4, question:'question4', answer: [ 'answer4.1', 'answer4.2', 'answer4.3' ], counter:2 }
  ]

  window.onload = load;

  function load() {
    const tbody = document.querySelector('table#words tbody')
    for (const word of words) {
      const tr = document.createElement('TR');
      tr.innerHTML = `<td>${word.id}</td> 
      <td>${word.question}</td> 
      <td>${word.answer}</td> 
      <td>${word.counter}</td> 
      <td><button class="btn btn-danger">Usuń</button></td>`;
      tbody.appendChild(tr);
    }

    tbody.onclick = action;
    function action({target}) {
      if (target.nodeName == 'BUTTON' && target.classList.contains('btn-danger')) {
        //console.log(target.closest('tr'));
        target.closest('tr').classList.add('hide');
        setTimeout(_=> { target.closest('tbody').removeChild(target.closest('tr')); }, 1000);
      }
    }
  }
</script>

 

 

 

[ Element.closest() ] [ cubic-bezier ]

Comments

To tez nawet ciekawy temat.

Tyle że w tym przykładzie masz tylko chowanie elementu, co jak chcę usunąć konkretny element z bazy? Muszę mieć id rekordu w bazie , a nie że to jest n-ty element z listy.

---

To tez nawet ciekawy temat.

Tyle że w tym przykładzie masz tylko chowanie elementu, co jak chcę usunąć konkretny element z bazy? Muszę mieć id rekordu w bazie , a nie że to jest n-ty element z listy.

 

No tak, mogę nadać w htmlu id np. id="element{idrekorduzbazy}" i się powoływać na to.

---

co jak chcę usunąć konkretny element z bazy?

w czasie generowania kodu html (np. w php-ie)  dodaj do przycisku atrybut id

`<td><button class="btn btn-danger" id="idrekorduzbazy">Usuń</button></td>`

wtedy w kodzie dodajesz obsługę ajax-a

<style>
  table {
    width: 500px;
    max-width: 500px;
  }
  th, td {
    text-align: center;
    font: 400 0.9em/1.1 system-ui;
    padding: 0.25em 0.5em;
    color: white;
  }
  th:first-child {
    width: 1em;
    max-width: 1em;
  }
  th:last-child {
    width: 4em;
    max-width: 4em;
  }
  th {
    text-transform: capitalize;
    font-variant: small-caps;
    background-color: black;
  }
  tbody tr {
    cursor: default;
    transition: 
      background 0.5s, 
      opacity 0.8s 0.2s,
      transform 1s cubic-bezier(0.5,-0.8,0.25,1.4);
  }
  tbody tr:nth-child(even) {
    background-color: rgba(0,0,0,0.6);
  }
  tbody tr:nth-child(odd) {
    background-color: rgba(0,0,0,0.5);
  }
  tbody tr:hover {
    background-color: rgba(0,0,0,0.8);
  }
  tr.hide {
    opacity: 0;
    transform: scale(0);
  }
  tfoot td {
    text-align: left;
    color: black;
  }
  tfoot .message {    
    padding: 0.25em 1em;
    font: 700 0.9em/1.1 system-ui;
  }
  .done {
    color: green;
  }
  .error {
    color: red;
  } 
</style>
  
<table id="words">
  <thead>
    <tr>
      <th>id</th>
      <th>question</th>
      <th>answer</th>
      <th>counter</th>
      <th><!-- button --></th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr><td colspan="4"></td></tr>
  </tfoot>
</table>
  
<script>
  const words = [
    { id:1, question:'question1', answer: [ 'answer1.1', 'answer1.2', 'answer1.3' ], counter:2 },
    { id:2, question:'question2', answer: [ 'answer2.1', 'answer2.2', 'answer2.3' ], counter:3 },
    { id:3, question:'question3', answer: [ 'answer3.1', 'answer3.2', 'answer3.3' ], counter:1 },
    { id:4, question:'question4', answer: [ 'answer4.1', 'answer4.2', 'answer4.3' ], counter:2 }
  ]
  
  window.onload = load;
  
  function load() {
    const tbody = document.querySelector('table#words tbody'),
          tfoot = document.querySelector('table#words tfoot td');


    for (const word of words) {
      const tr = document.createElement('TR');
      tr.innerHTML = `<td>${word.id}</td> 
        <td>${word.question}</td> 
        <td>${word.answer}</td> 
        <td>${word.counter}</td> 
        <td><button class="btn btn-danger" id="${word.id}">Usuń</button></td>`;
      tbody.appendChild(tr);
    }
  
    tbody.onclick = action;
    function action({target}) {
      if (target.nodeName == 'BUTTON' && target.classList.contains('btn-danger')) {
        tfoot.innerHTML = '<span class="message">Usuwam dane ...</span>';
        setTimeout(_=> { deleteFromDataBase(target.id, target); }, 1000);        
      }
    }

    async function deleteFromDataBase(id = null, target) {
      if (id) {
        try {
          const formatted_data = new FormData();
          formatted_data.append('id', id);

          const response = await fetch('delete_form_db.php', {
            method: 'POST',
            body: formatted_data
          });

          if (response.ok) {
            const result = await response.text();
            tfoot.innerHTML = result;

            target.closest('tr').classList.add('hide');
            setTimeout(_=> { target.closest('tbody').removeChild(target.closest('tr')); }, 1000);
          }
        } catch(err) {
          tfoot.innerHTML = err;
        } finally {
          setTimeout(_=> { tfoot.innerHTML = null; }, 2000);
        }
      }
    }

  }
</script>

 

delete_form_db.php  (nazwa pliku dowolna - tylko identyczna dla fetch('nazwa pliku dowolna.php')

<?php
  // Tu można dodać sprawdzanie za pomocą np. $_SESSION
  // sprawdzić, czy użytkownik jest zalogowany i
  // czy ma prawo do wykonania DELETE w danej tabel itp.

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $id = $_POST['id'] ?? null;

    if ($id && is_numeric($id)) {
      // ... kod połączenia z bazą danych
      // ... wykonanie sql: DELETE FROM ... itd.

      echo '<span class="message done">Dane zostały usunięte</span>';
    } else {
      echo '<span class="message error">Wystąpił problem podczas operacji usuwania!</span>';
    }
  }
?>

 

Answer 2

No tak już widzę , zabrakło jednego cudzysłowu....