我正在尝试输入文本到<textarea>但是一旦我点击添加按钮，页面内的文本区域就会变成空白

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

本文关键字：文本 空白 添加 按钮 区域 输入 textarea      更新时间：2023-09-26

我正在尝试创建一个网页表单，我被困在试图让字段进入我在网页上的文本区域。我是新的编程，所以请原谅我。下面是我的html代码:

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

这是一个默认的javascript文件，我是由我的教授使用作为一个例子，但我只是不能让它工作。

// 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");
}

首先使用getElementsByName()获取具有指定名称的所有元素。getElementsByName()方法返回文档中具有指定名称(name属性的值)的所有元素的集合，作为NodeList object。

NodeList object表示节点的集合。节点可以通过索引号访问。索引从0

开始

试试这个:

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>

			var fInput  = document.getElementById("firstName");
			var lInput   = document.getElementById("lastName");
        	var displayValue = document.getElementById("textDisplay");
			var fullNames  = [];
	     	function insertNames(){
	     		 fullNames.push( fInput.value );
				 fullNames.push( lInput.value );
				 fullNames.sort();
				 displayTextvalue();
	     	}
	     	function displayTextvalue(){
				  // Clear our fields
				  fInput.value = "";
				  lInput.value = "";
				  // Show our output
				  displayValue.innerHTML = "";
				  displayValue.innerHTML += fullNames.join(", ");
	     	}
<!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" id="firstName" size="20" /><br/>
     <br/>
	 Last Name: <br/>
	 <input type="text" id="lastName" size="20" /><br/>
	 <br/>
     <input type="button" name="addname" value="Add"
     onclick="insertNames()">
     <br/>
	 <h2>Sorted Names</h2>
     </form>
     <textarea cols="60" rows="10" id="textDisplay" name="sorted">
     </textarea>
</body><br/>
<footer>
Marco Deleon,
Course CRN - 21819,
Date Completed: 11/6/2016,
Assignment # Lab9
</footer>
</html>

在相同的表单中，每个文本框(from element)应该有不同的名称。

在你的代码中按照下面的方式做更改，它会工作的

var numbernames=0;
var names = new Array();
function SortNames() {
   // Get the name from the text field
   thename=document.theform.newname.value;
    thename1=document.theform.lastname.value;
   // Add the name to the array
   names[numbernames]=thename+"'n"+thename1;
   // Increment the counter
   numbernames++;
   // Sort the array
   names.sort();
   document.theform.sorted.value=names.join("'n");
}
<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="lastname" 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>

相关文章：