题目:
目标:
找到 index.js
文件中的 mPrompt
函数,完成函数中的 TODO 部分。
- 点击“点击弹出对话框,输入咒语”按钮会调用
mPrompt
函数,mPrompt
调用后页面显示对话框。mPrompt
函数必须返回一个promise
对象。 - 在对话框中的输入框中输入文字后,点击确认按钮,对话框消失,
promise
返回成功,promise
成功的值为输入的值。 - 只有当成功的值为“芝麻开门”时门自动打开(已实现)。
- 点击取消,对话框消失,
promise
返回失败,失败的值为false
。 - 对话框的显示隐藏请使用 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不太熟悉,这一部分需要去学习一下