我想显示一条消息来确认删除

Question

首先，即使我想在点击表格后显示消息，也没有任何反应。我不明白第一步缺少什么。最后，我想在点击按钮删除后确认删除。每个文件都有我的代码html.twig和js

main.js：

   var produits = document.getElementById('produits');

   if (produits) {
         produits.addEventListener('click', e => {
          // if (e.target.className === 'btn btn-danger') {
          //     if (confirm('Are you sure?')) {
          //         const id = e.target.getAttribute('data-id');
          //
          //         fetch(`/Delete/${id}`, {
          //
          //   }).then(res => window.location.reload());
          //}
          // }
    alert(2);
         });
    }

Affiche.html.twig：

    <table class="table table-striped table-bordered" id="produits">

                        <tr>

                            <th>Nom</th>
                            <th>Desctiption</th>
                            <th>Image</th>
                            <th>Operation</th>
                            <th>Actions</th>

                        </tr>


                        {%  for produit in produits %}

                            <tr>

                                <td>{{ produit.nomProduit }}</td>

                                <td>{{ produit.descriptionProduit }}</td>

                                <td><img alt="" src="{{ asset('uploads/images/'~produit.imageProduit) }}"></td>

                                <td>{{ produit.operationProduit }}</td>
                                <td>
                                    <a href="" class="btn btn-info" id="button">Show</a>
                                    <a href="" class="btn btn-success">Edit</a>
                                    <a href="Supprimer/{{ produit.idProduit }}" class="btn btn-danger" data-id="{{ produit.idProduit }}">Delete</a>
                                </td>


                            </tr>

                        {% endfor %}



                    </table>

Answer 1

1. 根据定义，ID是唯一的，在这里您似乎可以拥有多个产品，因此您应该设置一个类以将它们全部定位。此外，您设置“数据ID”而不是ID。我在我的例子中使用了“produits-alerte”。
2. 按类选择产品并循环遍历它们以添加onClick事件，这样您就可以触发对话框并获取产品的特定ID。

因此它导致：

for (var i = 0, len = produits_alerte.length; i < len; i++) {  
    produits_alerte[i].onclick = function() {
        if (confirm("Are you sure?")) {

            console.log('Product ID Clicked : ' + this.getAttribute("data-id"));

            //delete product with id above

        } else {

            //or don't

        }
    } 
}

Here is a working solution只使用vanilla JavaScript。

Answer 2

创建一个功能：

    <script>
      function getvalue() {
        alert("Hi");
        return;
      }
    </script>

使用'onClick'将其链接到按钮：

<a href="Supprimer/{{ produit.idProduit }}" class="btn btn-danger" data-id="{{ produit.idProduit }}" onClick="getvalue()">Delete</a>