洗掉資料并獲取按鈕ID

我正在嘗試創建一個從資料庫讀取資料并將其列在頁面上的程式。一切正常，只是現在我在洗掉資料時遇到問題。

資料庫中的資料將被列出，并且將添加一個洗掉按鈕。每個按鈕都具有與資料相同的 id。當我按下按鈕時，應該使用 onclick 啟動帶有 id 引數的函式。

但我得到這個錯誤：

index.html:1 未捕獲的 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 ...

uj5u.com熱心網友回復：

首先，默認情況下，函式的作業方式類似于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

uj5u.com熱心網友回復：

首先， id 屬性不將值作為數字，因此您需要輸入 id=btn-1

uj5u.com熱心網友回復：

在 buttn.setAttribute 下宣告了函式 reply_click，因為 JavaScript 是按程式讀取代碼的，所以這個函式在作用域中還不存在。此外，由于每個按鈕的功能都是相同的（ID 只是一個引數），因此根本不需要在 forEach 中宣告它。

嘗試將 reply_click 函式放在 products() 函式上方的全域范圍內。

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


function products() {
...

uj5u.com熱心網友回復：

將 reply_click 從 products 函式的范圍移動到全域范圍，因為 onClick 正在全域范圍內尋找函式。

    <script>
     window.onload = onl oadListener;
     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>

標籤：

上一篇：Karma-jasmine我如何在模態中測驗關閉函式

下一篇：回圈遍歷陣列并找到===口袋妖怪型別的鍵？[復制]