生成的按钮的功能仅在第二次单击时有效
[英]Generated button's function only works on second click
问题描述
我有一个函数，该函数创建一个警报框，并在标题字段和消息中填充信息（错误，成功，信息...），然后添加一个按钮，该按钮具有onclick函数以删除消息警报。
第一次生成消息并单击该按钮时，没有任何反应，但是再次单击该消息时，它将关闭该消息并适用于以后创建的所有消息，直到页面重新加载。
var container = document.getElementById('modal-container'); var page = document.getElementById('html'); var current; function createBox(msgtype) { var back = document.createElement('span'); back.className = 'modal-window'; container.appendChild(back); var box = document.createElement('div'); box.className = 'modal-message-box'; back.appendChild(box); if (msgtype == 'error') { var head = document.createElement('span'); head.className = 'errorheader'; } else if (msgtype == 'info') { var head = document.createElement('span'); head.className = 'infoheader'; } else if (msgtype == 'success') { var head = document.createElement('span'); head.className = 'successheader'; } box.appendChild(head); var title = document.createElement('h2'); title.id = 'alert-title'; title.className = 'alert-title'; head.appendChild(title); var msg = document.createElement('h4'); msg.id = 'alert-message'; msg.className = 'alert-message'; box.appendChild(msg); var btn = document.createElement('button'); btn.innerHTML = 'Close'; btn.onclick = closemsg; box.appendChild(btn); page.className = 'noscroll'; current = document.getElementById('modal-window'); } function alertBoxPopup(msgtype, title, msg) { createBox(msgtype); document.getElementById('alert-title').innerHTML = title; document.getElementById('alert-message').innerHTML = msg; } function closemsg() { document.getElementById('html').className = ''; container = document.getElementById('modal-container'); container.removeChild(container.firstChild); }
.modal-container{ display: flex; align-content: center; justify-content: center; } .modal-window{ background-color: rgba(0,0,0,.5); height: 100vh; width: 100vw; position: fixed; margin: 0px; padding: 0px; z-index: 5; display: flex; justify-content: center; align-items: center; } .modal-message-box{ background: white; max-height: 400px; min-height: 300px; max-width: 700px; min-width: 500; border-radius: 10px; overflow: hidden; }
<html id='html'> <body> <div class="modal-container" id="modal-container"></div> <div class="row"><button onclick="alertBoxPopup('error', 'Uh-Oh!', 'You have screwed up something!')">Error</button> <button onclick="alertBoxPopup('info', 'Information!', 'Did you know? This box is just a bit of information!')">Info</button> <button onclick="alertBoxPopup('success', 'YES!', 'You did it man! You did something good!')">Success</button> </div> </body> </html>
1 个解决方案
解决方案1
0 2017-05-15 05:25:48
我确实能够偶然发现这一点。
我意识到我将页面存储在一个变量中，正在搜索它，一时兴起，我决定将className更改放在removeChild之后。 无论出于何种原因，它都有效。
var container = document.getElementById('modal-container'); var page = document.getElementById('html'); var current; function createBox(msgtype, extrabtn, ebname, ebfunc){ var back = document.createElement('span'); back.className = 'modal-window'; container.appendChild(back); var box = document.createElement('div'); box.className = 'modal-message-box'; back.appendChild(box); if(msgtype == 'error'){ var head = document.createElement('span'); head.className = 'errorheader'; }else if(msgtype == 'info'){ var head = document.createElement('span'); head.className = 'infoheader'; }else if(msgtype == 'success'){ var head = document.createElement('span'); head.className = 'successheader'; } box.appendChild(head); var title = document.createElement('h2'); title.id = 'alert-title'; title.className = 'alert-title'; head.appendChild(title); var msg = document.createElement('h4'); msg.id = 'alert-message'; msg.className = 'alert-message'; box.appendChild(msg); if(extrabtn){ var row = document.createElement('div'); row.className = 'row'; var xtrbtn = document.createElement('button'); xtrbtn.innerHTML = ebname; xtrbtn.onclick = ebfunc; var btn = document.createElement('button'); btn.innerHTML = 'Close'; btn.onclick = function(){ closemsg(); }; box.appendChild(row); row.appendChild(xtrbtn); row.appendChild(btn); }else{ var btn = document.createElement('button'); btn.innerHTML = 'Close'; btn.onclick = function(){ closemsg(); }; box.appendChild(btn); } page.className = 'noscroll'; current = document.getElementById('modal-window'); } function alertBoxPopup(msgtype, title, msg, extrbtn, ebname, ebfunc){ createBox(msgtype, extrbtn, ebname, ebfunc); document.getElementById('alert-title').innerHTML = title; document.getElementById('alert-message').innerHTML = msg; } function closemsg(){ container = document.getElementById('modal-container'); container.removeChild(container.firstChild); page.className = ''; }
.modal-container{ display: flex; align-content: center; justify-content: center; } .modal-window{ background-color: rgba(0,0,0,.5); height: 100vh; width: 100vw; position: fixed; margin: 0px; padding: 0px; z-index: 5; display: flex; justify-content: center; align-items: center; } .modal-message-box{ background: white; max-height: 400px; min-height: 300px; max-width: 700px; min-width: 500; border-radius: 10px; overflow: hidden; }
<html id="html"> <body> <div class="modal-container" id="modal-container"></div> <div class="row"> <button onclick="alertBoxPopup('error', 'Uh-Oh!', 'You have screwed up something!')">Error</button> <button onclick="alertBoxPopup('info', 'Information!', 'Did you know? this is just information!')">Info</button> <button onclick="alertBoxPopup('success', 'YES!', 'You did it man! You did something good!')">Success</button> </div> <body> <html>
jquery - 单击时更改按钮的文本仅在第二次单击时起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.