1,105,214 Community Members

JavaScript Return value

Member Avatar
knitex
Newbie Poster
14 posts since Jun 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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>
Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
2
 

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.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: