删除数据并获取按钮ID答案

【问题标题】：Deleting data and get ID of button删除数据并获取按钮ID
【发布时间】：2022-01-20 21:53:29
【问题描述】：

我正在尝试创建一个从数据库中读取数据并将其列在页面上的程序。一切正常，只是现在我在删除数据时遇到问题。

将列出数据库中的数据，并在其中添加一个删除按钮。每个按钮都具有与数据相同的 id。当我按下按钮时，带有 id 参数的函数应该使用 onclick 启动。

但我收到此错误：

index.html:1 Uncaught ReferenceError: reply_click 未定义在 HTMLButtonElement.onclick (index.html:1:1)

我的代码：

<script type="module">
    window.onload = products;
    


    const issuesRef = ref(db, 'student');
    
    var id = 0;
    function products() {
        onValue(issuesRef, (snapshot) => {
            snapshot.forEach(snap => {
                const issue = snap.val();

                var id_2 = document.createElement("div");
                var div = document.createElement("div");
                var div2 = document.createElement("div");
                var div3 = document.createElement("div");
                var div4 = document.createElement("div");             

                var buttn = document.createElement("button");
                buttn.setAttribute("id", issue.RollNo);
                
                buttn.setAttribute("onclick", "reply_click(this.id)");
                function reply_click(clicked_id){
                    console.log(clicked_id);
                }
                
                id_2.innerHTML = ++id;
                div.innerHTML = issue.NameOfStd;
                div2.innerHTML = issue.Gender;
                div3.innerHTML = issue.RollNo;
                div4.innerHTML = issue.Section;
                buttn.innerHTML = "delete";
                
                document.body.appendChild(id_2)
                document.body.appendChild(div);
                document.body.appendChild(div2);
                document.body.appendChild(div3);
                document.body.appendChild(div4);
                document.body.appendChild(buttn);
            })
        });  
    }          
    
</script>

我认为问题出在函数 reply_click() 和 buttn.setAttribute...

【问题讨论】：

标签： javascript html firebase-realtime-database

【解决方案1】：

首先，默认情况下，函数像local variables一样工作，在另一个函数的范围内定义一个函数使其成为本地函数，这不是一个好的做法，但可以这样做。

现在说说报错的原因，onclick是在找一个不存在的全局函数，其实推荐的是使用addEventListener。

我还要说不推荐使用var，请阅读： https://phoenix35.js.org/good-practices.html

const buttn = document.createElement("button");
buttn.id = issue.RollNo

buttn.addEventListener("click", function(event) {
    // all events pass the Event object as first parameter to the callback
    // Event objects has a target property pointing to the HTMLElement who fired the event
    // HTMLElement has attributes as properties so you can get the id by event.target.id
    console.log(event.target.id); 
});

/*
works too but not recommended:
buttn.onclick = function(event) {
    console.log(event.target.id); 
}
*/

参考资料： https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Web/API/Event

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

【讨论】：

【解决方案2】：

首先 id 属性不将值作为数字，所以你需要像 id=btn-1 一样输入

【讨论】：

自动转成字符串

【解决方案3】：

函数reply_click在buttn.setAttribute下面声明，因为JavaScript程序读取代码，这个函数在作用域中还不存在。另外，由于每个按钮的功能都是相同的（ID只是一个参数），所以根本不需要在forEach中声明。

尝试将 reply_click 函数放在全局范围内，在 products() 函数之上。

function reply_click(clicked_id) {
    console.log(clicked_id)
}


function products() {
...

【讨论】：

感谢您的回复，但我得到了同样的错误

【解决方案4】：

将 reply_click 从 products 函数的范围移动到全局范围，因为 onClick 正在全局范围内寻找函数。

    <script>
     window.onload = onLoadListener;
     function onClickListener(id) {
       console.log(id);
     }
    function onLoadListener() {
       var buttn = document.createElement("button");
       buttn.innerHTML = "CLICK";

       buttn.setAttribute("id", '123');
       buttn.setAttribute("onclick", "onClickListener(this.id)");
       document.getElementById("app").append(buttn);
   }
 </script>

【讨论】：