删除数据并获取按钮的ID

Question

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

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

但是我得到这个错误：

index.html:1 Uncaught ReferenceError: reply_click is not defined at 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... 中

Answer 1

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

Answer 2

函数 reply_click 在 buttn.setAttribute 下方声明，由于 JavaScript 程序读取代码，该函数尚不存在于作用域中。此外，由于每个按钮的功能相同（ID 只是一个参数），因此根本不需要在 forEach 中声明它。

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

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


function products() {
...

Answer 3

首先，默认情况下函数的工作方式类似于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

Answer 4

将 reply_click 从产品功能范围移至全局范围，因为 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>

删除数据并获取按钮的ID

Deleting data and get ID of button

html

javascript

firebase-realtime-database