For my code below i use getElementsByTagName('p') to get the values of the paragraphs that the user enters. but for some reason it when i use textNum[0].value it returns undefined. i tested it with textNum.length and the length keeps increasing which means values are being added to the array. not really sure what the problem is with it.
Thanks for the help in advanced
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#theform {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
</style>
<script type = "text/javascript">
function addText( evt ){
var radioButtons = document.getElementsByName('choice')
var choice = ""
for( var x = 0; x < radioButtons.length; x++){
if(radioButtons[x].checked){
choice = radioButtons[x].value
break;
}
}
var textNum = document.getElementsByTagName('p')
var form = evt.target.form
if(choice == "add"){
var text = form.text.value
var div = document.getElementById('change')
var p = "<p>" + text + "</p>"
div.innerHTML = div.innerHTML + p
}
if(choice == "delete"){
var position = form.position.value
var div = document.getElementById('change')
for(var i = 0; i < textNum.length; i++){
if(i == position - 1){
textNum.splice(i,1)
}
for(var i = 0; i < textNum.length; i++){
var value = textNum[i]
var p = "<p>" + value + "</p>"
div.innerHTML = div.innetHTML + p
}
}
}
if(choice == "insert"){
var div = document.getElementById('test')
var position = form.position.value
div.innerHTML = textNum[0]
/*var text = form.text.value
var position = form.position.value
var div = document.getElementById('change')
var p = "<p>" + text + "</p>"
var alternate = ""
for(var i = 0; i < textNum.length + 1; i++){
if(i == position){
alternate = textNum[i].value
textNum[i].value = p
}
}*/
}
if(choice == "replace"){
var text = form.text.value
var position = form.position.value
var p = "<p>" + text + "</p>"
textNum[position].value = p
var test = document.getElementById('test')
test.innerHTML = textNum[0].value
}
var list = document.getElementById('position')
var option=document.createElement("option")
var i = textNum.length
option.text = i
list.add(option,null);
}
function initForms(){
var form = document.getElementById('theform')
form.submitForm.onclick = addText;
}
</script>
</head>
<body onload="initForms()">
<form id="theform" name="theform" action="javascript:void 1">
<textarea name="text" cols="40" rows="10"></textarea><br /><br />
<input type="radio" name="choice" value="add" id="RadioGroup1_0" />
Add Node</label>
<label>
<input type="radio" name="choice" value="delete" id="RadioGroup1_1" />
Delete</label>
<label>
<input type="radio" name="choice" value="insert" id="RadioGroup1_2" />
Insert After</label>
<label>
<input type="radio" name="choice" value="replace" id="RadioGroup1_3" />
Replace
<br /><br />
Position#<select name="position" id="position">
</select>
<button name="submitForm">Submit</button>
</form>
<div id = "change">
</div>
<div id = "test">
</div>
</body>
</html>