<textarea>にテキストを入力しようとしていますが、追加ボタンをクリックするとページ内のテキスト領域が空白になります

-2

ウェブページフォームを作成しようとしていますが、私はウェブページ上にあるテキスト領域。私はプログラミングに慣れていないので、私に同行してください。ここに私のhtmlコードは次のとおりです。<textarea>にテキストを入力しようとしていますが、追加ボタンをクリックするとページ内のテキスト領域が空白になります

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <script type="text/javascript" src="lab8.js"></script> 
 
\t <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> 
 
\t <form name="theform" > 
 
\t \t First Name: <br/> 
 
    <input type="text" name="newname" size="20" /><br/> 
 
    <input type="button" name="addname" value="Add" 
 
    onclick="SortNames();"> 
 
    <br/> 
 
\t Last Name: <br/> 
 
\t <input type="text" name="newname" size="20" /><br/> 
 
    <input type="button" name="addname" value="Add" 
 
    onclick="SortNames();"> 
 
    <br/> 
 
\t <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"); 
 
}

出典

2016-11-07 Marco Deleon

に動作します

は下記のとおり変更しますか？ – Jigar7521

私はそれらを注入することができましたが、私はそれが可能な場合は、並べ替え機能を削除し、フィールドのテキストを一覧表示することができますか？ –

まず第一には、getElementsByName()を使用して、指定した名前を持つすべての要素を取得します。 getElementsByName()メソッドは、指定された名前（name属性の値）を持つドキュメント内のすべての要素のコレクションをとして返します。

NodeList objectは、ノードの集合を表します。ノードはインデックス番号でアクセスできます。（要素から）各テキストボックスには、別の名前を持つ必要があり、同じ形で

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> 
 
\t <script type="text/javascript" src="lab8.js"></script> 
 
\t <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> 
 
\t <form name="theform" > 
 
\t \t First Name: <br/> 
 
    <input type="text" name="newname" size="20" /><br/> 
 
     
 
    <br/> 
 
\t Last Name: <br/> 
 
\t <input type="text" name="newname" size="20" /><br/> 
 
    <input type="button" name="addname" value="Add" 
 
    onclick="SortNames();"> 
 
    <br/> 
 
\t <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>

出典

2016-11-07 06:37:20

このスニペットを徹底的にテストしましたか？ – Jigar7521

@ Jigar7521はい。私もスニペットを提供しました –

はい@senjuti、もちろん私はあなたのコードスニペットについて話しています – Jigar7521

\t \t \t var fInput = document.getElementById("firstName"); 
 
\t \t \t var lInput = document.getElementById("lastName"); 
 
     \t var displayValue = document.getElementById("textDisplay"); 
 
\t \t \t var fullNames = []; 
 
\t  \t function insertNames(){ 
 
\t  \t \t fullNames.push(fInput.value); 
 
\t \t \t \t fullNames.push(lInput.value); 
 
\t \t \t \t fullNames.sort(); 
 
\t \t \t \t displayTextvalue(); 
 
\t  \t } 
 
\t  \t function displayTextvalue(){ 
 
\t \t \t \t // Clear our fields 
 
\t \t \t \t fInput.value = ""; 
 
\t \t \t \t lInput.value = ""; 
 
\t \t \t \t // Show our output 
 
\t \t \t \t displayValue.innerHTML = ""; 
 
\t \t \t \t displayValue.innerHTML += fullNames.join(", "); 
 

 
\t  \t }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <script type="text/javascript" src="lab8.js"></script> 
 
\t <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> 
 
\t <form name="theform" > 
 
\t \t First Name: <br/> 
 
    <input type="text" id="firstName" size="20" /><br/> 
 
    <br/> 
 
\t Last Name: <br/> 
 
\t <input type="text" id="lastName" size="20" /><br/> 
 
\t <br/> 
 
    <input type="button" name="addname" value="Add" 
 
    onclick="insertNames()"> 
 
    <br/> 
 
\t <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>

出典

2016-11-07 07:34:25 Chiran

：インデックスはこれを試してみてください0

から始まります。あなたのコードでは、それはとても基本的にあなたがタイトな角度JSでテキストエリアの中にあるものをテキストボックスの値を注入したい

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" > 
 
\t \t First Name: <br/> 
 
    <input type="text" name="newname" size="20" /><br/> 
 
    <input type="button" name="addname" value="Add" 
 
    onclick="SortNames();"> 
 
    <br/> 
 
\t Last Name: <br/> 
 
\t <input type="text" name="lastname" size="20" /><br/> 
 
    <input type="button" name="addname" value="Add" 
 
    onclick="SortNames();"> 
 
    <br/> 
 
\t <h2>Sorted Names</h2> 
 
    <textarea cols="60" rows="10" name="sorted"> 
 
    The sorted names will appear here. 
 
    </textarea> 
 
    </form>

出典

2016-11-07 08:29:31

<textarea>にテキストを入力しようとしていますが、追加ボタンをクリックするとページ内のテキスト領域が空白になります

答えて

関連する問題