我試圖根據(jù)用戶單擊“刪除”還是“取消”從我的自定義彈出類返回true或false。我創(chuàng)建了popup類和一個init方法來顯示彈出窗口。init方法只是用于設(shè)置彈出窗口樣式和添加按鈕的模板字符串。我創(chuàng)建了一個getResult()方法,并向“取消”和“刪除”按鈕添加了一些單擊事件偵聽器。在我的app.js文件中,我實例化了一個彈出類,并調(diào)用了getResult()方法,并嘗試將返回值存儲在變量“ decision”中。class Popup { constructor(title, message){ this.title = title; this.message = message; this.container = document.querySelector('body'); }init(){ const popup = ` <div class="popup-wrapper"> <div class="popup bg-white p-1"> <div class="popup-close">X</div> <div class="popup-content "> <h2 class="">${this.title}</h2> <p class="p-1 my-2">${this.message}</p> <div class="dialogue_buttons my-1"> <button class="btn popup-no" onClick="">Cancel</button> <button class="btn btn-danger my-1 popup-yes" onClick="">Start Delete</button> </div> </div> </div> </div> `; this.container.innerHTML += popup;}getResult(){ document.querySelector('.popup-no').addEventListener('click', () => { console.log('no'); return false; }) document.querySelector('.popup-yes').addEventListener('click', () => { console.log('yes'); return true; }) }}export default Popup以下是我的app.js文件,其中我未顯示彈出窗口。 experienceTable && experienceTable.addEventListener('click', async e => { const id = e.target.parentElement.parentElement.getAttribute('data-id'); if (e.target.tagName === 'BUTTON') { console.log(id); const confirmDelete = new Popup( 'Delete', 'This will permanently delete this experience record.', ()=>db.deleteExperience(id), id ); confirmDelete.init(); const decision = await confirmDelete.getResult(); console.log(decision); }})在我的app.js文件中,我實例化了一個新的Popup并稱為init方法。彈出窗口在我的瀏覽器中正確顯示。當(dāng)我單擊“取消”時,它的控制臺將按預(yù)期記錄“否”。當(dāng)我單擊“刪除”時,控制臺按預(yù)期記錄日志“是”。但是,當(dāng)我用控制臺記錄變量決定時,我什么也沒得到。我希望根據(jù)用戶單擊哪個按鈕來決定是對還是錯。
如何從javascript類方法返回值?
縹緲止盈
2021-05-13 18:22:39