生成的按鈕的功能僅在第二次單擊時有效
[英]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.