蓝桥杯 12. 芝麻开门

题目：

目标：

找到 index.js 文件中的 mPrompt 函数，完成函数中的 TODO 部分。

1. 点击“点击弹出对话框，输入咒语”按钮会调用 mPrompt 函数，mPrompt 调用后页面显示对话框。mPrompt 函数必须返回一个 promise 对象。
2. 在对话框中的输入框中输入文字后，点击确认按钮，对话框消失， promise 返回成功，promise 成功的值为输入的值。
3. 只有当成功的值为“芝麻开门”时门自动打开（已实现）。
4. 点击取消，对话框消失，promise 返回失败，失败的值为 false。
5. 对话框的显示隐藏请使用 DOM 节点的添加删除实现。

最终效果：

function mPrompt() {
  // 弹窗必须使用以下结构 template 保存的是弹窗的结构字符串，可以先转化为 DOM 再通过 appendChild 方式插入到 body 中
  const template = `
        <div class="modal">
            <div class="message-box">
                <div class="message-header">请输入咒语</div>
                <div class="message-body">
                    <input type="text">
                </div>
                <div class="message-footer">
                    <button class="btn btn-small" id='cancel'>取消</button>
                    <button class="btn btn-small btn-primary" id='confirm'>确定</button>
                </div>
            </div>
        </div>
    `;
  const div = document.createElement("div");
  // TODO：待补充代码
  const body = document.getElementsByTagName("body")[0];

  div.innerHTML=template

  body.appendChild(div)

  return new Promise((res, rej) => {
    const confirm = document.getElementById("confirm");

    const cancel = document.getElementById("cancel");

    const input = document.querySelector('.message-body>input')

    confirm.addEventListener('click',function(){

      res(input.value)

      body.removeChild(div)
    })

    cancel.addEventListener('click',function(){

      rej()
      
      body.removeChild(div)
    })

  })
}

题目难度不是很难，主要我对promise不太熟悉，这一部分需要去学习一下