| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <body> | |
| 4 <form action="javascript:updateDom()"> | |
| 5 <label for="typer">New label text:</label> | |
| 6 <input name="typer" type="text"/> | |
| 7 <br/> | |
| 8 <label for="color">Select label color:</label> | |
| 9 <input name="color" id="red" value="red" type="radio"/>Red | |
| 10 <input name="color" id="green" value="green" type="radio"/>Green | |
| 11 <br/> | |
| 12 <input name="submit" type="submit" value="Add Label"/> | |
| 13 </form> | |
| 14 <div id="update_butter" style="display:none"></div> | |
| 15 <script> | |
| 16 var butter = document.getElementById('update_butter'); | |
| 17 | |
| 18 var textProperty = butter['innerText'] ? 'innerText' : 'textContent'; | |
| 19 | |
| 20 var listeners = []; | |
| 21 function registerListener(fn) { | |
| 22 listeners.push(fn); | |
| 23 } | |
| 24 | |
| 25 function updateDom() { | |
| 26 butter.style.display = 'block'; | |
| 27 butter[textProperty] = 'Updating'; | |
| 28 disableForm(); | |
| 29 tick(); | |
| 30 } | |
| 31 | |
| 32 function disableForm() { | |
| 33 var inputs = document.getElementsByTagName('input'); | |
| 34 for (var i = 0, input; input = inputs[i]; ++i) { | |
| 35 input.disabled = true; | |
| 36 } | |
| 37 } | |
| 38 | |
| 39 function enableForm() { | |
| 40 var inputs = document.getElementsByTagName('input'); | |
| 41 for (var i = 0, input; input = inputs[i]; ++i) { | |
| 42 input.disabled = false; | |
| 43 } | |
| 44 } | |
| 45 | |
| 46 function tick() { | |
| 47 var length = butter[textProperty].substring('Updating'.length).length; | |
| 48 if (length != 10) { | |
| 49 butter[textProperty] += '.'; | |
| 50 window.setTimeout(tick, 500); | |
| 51 } else { | |
| 52 enableForm(); | |
| 53 var div = document.createElement('div'); | |
| 54 var colors = document.forms[0].color; | |
| 55 for (var i = 0, color; color = colors[i]; ++i) { | |
| 56 if (color.checked) { | |
| 57 div.style.backgroundColor = color.value; | |
| 58 break; | |
| 59 } | |
| 60 } | |
| 61 div[textProperty] = document.forms[0].typer.value; | |
| 62 div.className = 'label'; | |
| 63 document.forms[0].typer.value = ''; | |
| 64 document.body.appendChild(div); | |
| 65 | |
| 66 butter[textProperty] = 'Done!'; | |
| 67 | |
| 68 window.setTimeout(function() { | |
| 69 while (listeners.length) { | |
| 70 try { | |
| 71 listeners.shift()(div[textProperty]); | |
| 72 } catch (e) { | |
| 73 butter[textProperty] = "Exception seen: " + e; | |
| 74 } | |
| 75 } | |
| 76 }, 500); | |
| 77 } | |
| 78 } | |
| 79 </script> | |
| 80 </body> | |
| 81 </html> | |
| OLD | NEW |