Generated button's function only works on second click

Question

I have a function that creates an alert box, fills the title field and message with information (error, success, info...) and then adds a button that gets an onclick function to remove the message alert.

When a message is first generated and you click the button nothing happens, but when you click it a second time it'll close the message and works for all messages created later until the page reloads.

  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>

Answer 1

I was able to actually figure this out on accident.

I realized that I stored the page in a variable, was searching for it and on a whim I decided to put the className change after the removeChild. For whatever reason it works.

 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>

Generated button's function only works on second click

Question

1 answers

solution1
0 2017-05-15 05:25:48

Generated button's function only works on second click

Question

1 answers

solution1 0 2017-05-15 05:25:48

solution1
0 2017-05-15 05:25:48