<html><head>
<title>Document Object</title>
<style type="text/css">
div.topbox {
width:1220px;
padding:10px;
border:5px solid gray;
margin:0px;
background-color: #e1e1e1;
font-size: 20px
}
div.bottombox{
width:200px;
padding:10px;
border:5px solid gray;
margin:0px;
background-color: #0000ee;
font-size: 20px;
}
.placeholder
{
background-color: #ccff33;
font-size: 22px
}
</style>
</head>
<body>
<div class="topbox">
Here is my (Tom Rabovsky)list:<span class="placeholder" id="placeholder">
<span>chicken</span><span>HotDogs</span><span>Steak</span><span>Hamburgers</span></span>
</div>
<br />
Click button to start
<input type="button" id="addOption" value="Add a new element">
<input type="button" id="deleteOption" value="Delete an element">
<br />
<div class="bottombox">
Total Chars:
</div>
<script>
window.onload = function() {
var arrayOfTags = document.getElementById("placeholder").getElementsByTagName("span");
options = [];
for (var i = 0; i <= arrayOfTags.length - 1; i++) {
options.push(arrayOfTags[i].childNodes[0].nodeValue);
};
document.getElementById("addOption").onclick = function() {
var newOption = prompt("What would you like to add? (Click cancel to abort)");
options.push(newOption);
var newOptionElement = document.createElement("span");
var newOptionElementText = document.createTextNode(newOption);
newOptionElement.appendChild(newOptionElementText);
document.getElementById("placeholder").appendChild(newOptionElement);
};
document.getElementById("deleteOption").onclick = function() {
var deleteOption = prompt("What would you like to delete? (Click cancel to abort)");
var exists = false;
for (var i = 0; i <= options.length - 1; i++) {
if (deleteOption === options[i]) {
document.getElementById("placeholder").removeChild(document.getElementById("placeholder").getElementsByTagName("span")[i]);
options.splice(i, 1);
i = options.length - 1;
exists = true;
};
};
if (exists === false) {
alert("This item does not exist. Please re-enter.");
};
};
};
</script>
</body></html>