This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Nov 2nd, 2012  |  syntax: None  |  size: 2.72 KB  |  views: 50  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html><head>
  2.  
  3. <title>Document Object</title>
  4.  
  5. <style type="text/css">
  6. div.topbox {
  7.     width:1220px;
  8.     padding:10px;
  9.     border:5px solid gray;
  10.     margin:0px;
  11.     background-color: #e1e1e1;
  12.     font-size: 20px
  13. }
  14. div.bottombox{
  15. width:200px;
  16. padding:10px;
  17. border:5px solid gray;
  18. margin:0px;
  19. background-color: #0000ee;
  20. font-size: 20px;
  21. }
  22. .placeholder
  23. {
  24. background-color: #ccff33;
  25. font-size: 22px
  26. }
  27. </style>
  28.  
  29. </head>
  30.  
  31. <body>
  32.  
  33. <div class="topbox">
  34.        
  35. Here is my (Tom Rabovsky)list:<span class="placeholder" id="placeholder">
  36.                    
  37. <span>chicken</span><span>HotDogs</span><span>Steak</span><span>Hamburgers</span></span>
  38.                    
  39. </div>
  40.        
  41. <br />
  42.        
  43. Click button to start
  44.        
  45. <input type="button" id="addOption" value="Add a new element">
  46. <input type="button" id="deleteOption" value="Delete an element">
  47.        
  48. <br />
  49.        
  50. <div class="bottombox">
  51.        
  52. Total Chars:
  53.        
  54. </div>
  55.  
  56. <script>
  57.         window.onload = function() {
  58.            
  59.             var arrayOfTags = document.getElementById("placeholder").getElementsByTagName("span");
  60.            
  61.             options = [];
  62.             for (var i = 0; i <= arrayOfTags.length - 1; i++) {
  63.                     options.push(arrayOfTags[i].childNodes[0].nodeValue);
  64.             };
  65.            
  66.             document.getElementById("addOption").onclick = function() {
  67.                     var newOption = prompt("What would you like to add? (Click cancel to abort)");
  68.                     options.push(newOption);
  69.                     var newOptionElement = document.createElement("span");
  70.                     var newOptionElementText = document.createTextNode(newOption);
  71.                     newOptionElement.appendChild(newOptionElementText);
  72.                     document.getElementById("placeholder").appendChild(newOptionElement);
  73.             };
  74.             document.getElementById("deleteOption").onclick = function() {
  75.                     var deleteOption = prompt("What would you like to delete? (Click cancel to abort)");
  76.                     var exists = false;
  77.                     for (var i = 0; i <= options.length - 1; i++) {
  78.                             if (deleteOption === options[i]) {
  79.                                     document.getElementById("placeholder").removeChild(document.getElementById("placeholder").getElementsByTagName("span")[i]);
  80.                                     options.splice(i, 1);
  81.                                     i = options.length - 1;
  82.                                     exists = true;
  83.                             };
  84.                     };
  85.                     if (exists === false) {
  86.                             alert("This item does not exist. Please re-enter.");
  87.                     };
  88.             };
  89.     };
  90. </script>
  91.        
  92. </body></html>
clone this paste RAW Paste Data