JavaScript Return value

Question

knitex 0 Newbie Poster

14 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>

html-css javascript

Edited 14 Years Ago by knitex because: n/a

2 Contributors
1 Reply
253 Views
9 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by AleMonteiro

Dani AI

Generated 9 Months Ago

A quick diagnosis and practical fixes.

The reason textNum[0].value is undefined is simple: <p> elements are DOM elements, not form controls, so they don’t have a value property. getElementsByTagName('p') returns a live NodeList of HTMLParagraphElement objects. That explains why textNum.length grows (the list is live) but textNum[i].value is undefined. Use textContent / innerText / innerHTML to read or set paragraph content, and avoid treating a NodeList like a real Array.

Use a static list or an array when you need array methods, and manipulate DOM nodes directly when changing the document. Example patterns (modern browsers):

var first = document.querySelector('#change p');
var text = first ? first.textContent : ''; // read text, not .value

var ps = document.querySelectorAll('#change p'); // static NodeList
var idx = parseInt(form.position.value, 10) - 1;
if (ps[idx]) ps[idx].remove(); // remove node from DOM

Other practical notes that address bugs in the original code and complement ’s rewrite:

NodeList has no splice. Convert when needed: var arr = Array.from(document.querySelectorAll('#change p'));
Avoid string-concatenating innerHTML (loses event handlers and risks XSS). Create elements with document.createElement('p') and set textContent.
Watch for typos (innetHTML), reuse of the same var i in nested loops (clobbers index), and reading select values as strings—use parseInt(..., 10).
If removing while iterating a live list, iterate backwards (i = length-1; i >= 0; i--) or work from a static copy.

These points explain the undefined value and provide safe, maintainable ways to add/insert/delete/replace paragraph nodes.

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.