JavaScript Return value

Question

knitex 0 Newbie Poster

12 Years Ago

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>

dom javascript

Edited 12 Years Ago by knitex because: n/a

2 Contributors
1 Reply
237 Views
9 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by AleMonteiro

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AleMonteiro 238 Can I pick my title? · Answer 1 · 2012-03-06T02:54:27+00:00

Hi knitex, your code has a number of issues, so I thought about what you were trying to do and made it happen.

I hope this is what you need:

<!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 form = evt.target.form; // Form
	var div = document.getElementById("change"); // Div that will hold the paragraphs
	var textNum = div.getElementsByTagName('p'); // Get only P inside 'change'
	var text = form.text.value; // Text of text area
	var position = form.position.value; // Position
	
	if(choice == "add"){
		var p = "<p>" + text + "</p>";
		div.innerHTML = div.innerHTML + p;
	}
	else if(choice == "delete"){
		var node = textNum[position]; // Get P from position
		node.parentNode.removeChild(node); // Remove P
	}
	else if(choice == "insert"){
		var p=document.createElement("p"); // Create P
		p.innerHTML = text;
		
		if ( textNum.length > 0 && position + 1 < textNum.length ) // If P is between others
		{
			div.insertBefore(p, textNum[position+1]);
		}
		else // If P is first or last
		{
			div.appendChild(p);
		}
	}
	else if(choice == "replace"){
		var node = textNum[position];
		node.innerHTML = text; // Change text of existing P
	}
	
	refreshList();
}

// Refresh dropdown list with all existing P's
function refreshList()
{
	var list = document.getElementById('position')
	list.length = 0; // Reset list
	
	var textNum = document.getElementsByTagName('p');
	for(var i=0; i < textNum.length; i++)
	{
		var option=document.createElement("option")
		option.text = i;
		option.value = 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<b></b>: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" type="button">Submit</button>
    
  
</form>

	<div id = "change">
	</div>

</body>
</html>

The code has some comments, but if you got any doubts just ask.

Hope it helps.