如何从javascript类方法返回值？

Question

我试图根据用户单击“删除”还是“取消”从我的自定义弹出类返回true或false。

我创建了popup类和一个init方法来显示弹出窗口。init方法只是用于设置弹出窗口样式和添加按钮的模板字符串。我创建了一个getResult（）方法，并向“取消”和“删除”按钮添加了一些单击事件侦听器。在我的app.js文件中，我实例化了一个弹出类，并调用了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方法。弹出窗口在我的浏览器中正确显示。当我单击“取消”时，它的控制台将按预期记录“否”。当我单击“删除”时，控制台按预期记录日志“是”。但是，当我用控制台记录变量决定时，我什么也没得到。我希望根据用户单击哪个按钮来决定是对还是错。

Answer 1

我相信您的getResult方法当前实际上未返回任何内容，因为return语句当前仅在回调的范围内，然后它们停留在该级别。getResult(){&nbsp; let result = false;&nbsp; document.querySelector('.popup-no').addEventListener('click', () => {&nbsp; &nbsp; console.log('no');&nbsp; })&nbsp; &nbsp; &nbsp;&nbsp; document.querySelector('.popup-yes').addEventListener('click', () => {&nbsp; &nbsp; console.log('yes');&nbsp; &nbsp; result = true;&nbsp; })&nbsp; return result;&nbsp; &nbsp; &nbsp;}因此，这里您要创建一个变量，然后在回调中将值分配给该变量，然后返回该结果。