Marco Deleon Marco Deleon - 25 days ago 9
Javascript Question

I am trying to input text into a <textarea> but once I click the add button, the text area within the page goes blank

I am trying to create a webpage form and i am stuck on trying to get the fields to go into the text area i have on the webpage. I am new to programming so please bear with me. Here is my html code:



<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="lab8.js"></script>
<title>Input Form Web Page</title>

</head>
<body>
<h1>Input Form Webpage</h1>
<p>Enter two or more names in the field below,
and the sorted list of names will appear in the
textarea.</p>
<form name="theform" >
First Name: <br/>
<input type="text" name="newname" size="20" /><br/>
<input type="button" name="addname" value="Add"
onclick="SortNames();">
<br/>
Last Name: <br/>
<input type="text" name="newname" size="20" /><br/>
<input type="button" name="addname" value="Add"
onclick="SortNames();">
<br/>
<h2>Sorted Names</h2>
<textarea cols="60" rows="10" name="sorted">
The sorted names will appear here.
</textarea>
</form>


</body><br/>
<footer>
Marco Deleon,
Course CRN - 21819,
Date Completed: 11/6/2016,
Assignment # Lab9
</footer>
</html>





This is a default javascript file that i was given by my professor to use as an example but i just cant get it to work.



// initialize the counter and the array
var numbernames=0;
var names = new Array();
function SortNames() {
// Get the name from the text field
thename=document.theform.newname.value;
// Add the name to the array
names[numbernames]=thename;
// Increment the counter
numbernames++;
// Sort the array
names.sort();
document.theform.sorted.value=names.join("\n");
}




Answer

First of all get all elements with the specified name by using getElementsByName(). The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0

Try this:

var numbernames=0;
var names = new Array();
function SortNames() {
   // Get the name from the text field
   for(var i = 0; i< 2; i++){
   var thename=document.getElementsByName('newname')[i].value;
   // Add the name to the array
   names[i]=thename;
   // Increment the counter
   //numbernames++;
   // Sort the array
   //names.sort();
   
  }
  
  document.getElementsByName('sorted')[0].value=names.join("\n");
 
}
<!DOCTYPE html>
<html lang="en">
<head>
	<script type="text/javascript" src="lab8.js"></script>
	<title>Input Form Web Page</title>

</head>
<body>
 <h1>Input Form Webpage</h1>
     <p>Enter two or more names in the field below,
     and the sorted list of names will appear in the
     textarea.</p>
	<form name="theform" >
		First Name: <br/>
     <input type="text" name="newname" size="20" /><br/>
     
     <br/>
	 Last Name: <br/>
	 <input type="text" name="newname" size="20" /><br/>
     <input type="button" name="addname" value="Add"
     onclick="SortNames();">
     <br/>
	 <h2>Sorted Names</h2>
     <textarea cols="60" rows="10" name="sorted" id ="name">
     The sorted names will appear here.
     </textarea>
     </form>


</body><br/>
<footer>
Marco Deleon,
Course CRN - 21819,
Date Completed: 11/6/2016,
Assignment # Lab9
</footer>
</html>

Comments