2012-09-24 39 views
2

只是教我自己javascript和即時通訊嘗試讓我的代碼讀取用戶的輸入內容,然後將它們打印到文本區域,但迄今爲止我一直未成功。將JavaScript數組轉換爲textarea

到目前爲止我只是使用警報來測試我的代碼是否將輸入存儲在我已設置的數組中。

<HTML> 
    <HEAD> 
    <TITLE>Test Input</TITLE> 
    <SCRIPT LANGUAGE="JavaScript"> 
    var TestVar = new Array(); 

    var i = 0; 
    function testResults (form) { 
     TestVar[i] = form.inputbox.value; 
     alert ("You typed: " + TestVar[1]); 
     i++; 

    } 
    </SCRIPT> 
    </HEAD> 
    <BODY> 
    <FORM NAME="myform" ACTION="" METHOD="GET">Enter a name into the box: <BR> 
     <INPUT TYPE="text" NAME="inputbox" VALUE=""><P> 
     <INPUT TYPE="button" NAME="button" Value="Click" 
     onClick="testResults(this.form)"> 

     <form name="myform" action="" method="POST"> 
     <div align="center"> 

     <textarea cols="40" rows="5" name="output">'Now we are inside the area - which is nice.' this.TestVar[i];</textarea> 
     </FORM> 
    </BODY> 
</HTML> 

我知道它的基本的,但我似乎無法得到它的權利,感謝安寧任何幫助。

+0

使用console.log()函數 –

回答

1

alert調用應該如下

alert ("You typed: " + TestVar[i]); 

在地方的i你寫1被寫入。

,並做i++之前,添加以下行:

form.output.value += TestVar[i]; 

現在,你正在改變的textarea動態內容。

1

更新您的發言

alert ("You typed: " + TestVar[1]); // Here you are passing 1, which is telling to get value at index 1. 

alert ("You typed: " + TestVar[i]); //You are storing at i index so get it again from i index. 
0
<SCRIPT LANGUAGE="JavaScript"> 

    function testResults (form) { 
     TestVar= form.inputbox.value; 
     alert ("You typed: " + TestVar); 
    } 
    </SCRIPT> 
0

這是你想做的事。我已經使用jQuery的,你可以刪除jQuery和使用本地JavaScript的..

HTML:

<HTML> 
<BODY> 
<FORM id="myform" NAME="myform" ACTION="" METHOD="GET">Enter a name into the box: <BR> 
<INPUT id="inputbox" TYPE="text" NAME="inputbox" VALUE=""><P> 
<INPUT id="clickBtn" TYPE="button" NAME="button" Value="Click"> 
<form name="myform" action="" method="POST"> 
<div align="center"> 

<textarea id="textarea" cols="40" rows="5" name="output"> 

</textarea> 
</FORM> 
</BODY> 
</HTML> 

的Javascript:

$("#clickBtn").click(function(){ 
    var form = $("#myform"); 

    $("#textarea").val($("#textarea").val() + $("#inputbox").val()); 
}); 

JSFiddle link

1

好吧,我只是一往直前的樣品中修復的東西了...小的更正。 (和一些編輯,以滿足我的語法特定的眼睛) 我用jQuery。 (使用本機JS櫃面你不想使用它)

var TestVar = new Array(); 
function testResults(form) { 
    TestVar.push(form.inputbox.value); 
    $("#outputTa").val(TestVar); 
} 

的形式是一樣的,只是增加了一個id = 「outputTa」 到textarea的

<form name="myform" action="" method="GET"> 
Enter a name into the box: 
<br> 
<input type="text" name="inputbox" value=""><p> 
    <input type="button" name="button" value="Click" onclick="testResults(this.form)"> 
    <form name="myform" action="" method="POST"> 
    <div align="center"> 
     <textarea cols="40" rows="5" id="outputTa" name="output"></textarea> 
    </form> 
0
<HTML> 
    <HEAD> 
    <TITLE>Test Input</TITLE> 
    <SCRIPT LANGUAGE="JavaScript"> 
    var TestVar = new Array(); 

    var i = 0; 
    function testResults (form) { 
    // alert(form) 
     TestVar[i] = form.elements[0].value 
      var tempValue= document.getElementById("txtArea").value; 
      document.getElementById("txtArea").value=tempValue + TestVar[i]; 
     } 
    </SCRIPT> 
    </HEAD> 
    <BODY> 
    <FORM NAME="myform" ACTION="" METHOD="GET">Enter a name into the box: <BR> 
     <INPUT TYPE="text" NAME="inputbox" VALUE=""><P> 
     <INPUT TYPE="button" NAME="button" Value="Click" 
     onClick="testResults(this.form)"> 

     <form name="myform" action="" method="POST"> 
     <div align="center"> 

     <textarea id="txtArea" cols="40" rows="5" name="output"></textarea> 
     </FORM> 
    </BODY> 
</HTML>​ 
0

這裏的你的解決方案:

<html> 
<head> 
<title>Test Input</title> 
<script language="JavaScript"> 
var TestVar = new Array(); 
var i = 0; 
function testResults() { 
    TestVar[i] = document.getElementById("userinput").value; 

    var textAreaOutput = document.getElementById("output"); 
    textAreaOutput.value += TestVar[i] 
    i++; 
} 
</script> 
</head> 
<body> 

<form id="inputForm" name="inputForm" action="" method="GET">Enter a name into the box: <br/> 
    <INPUT TYPE="text" name="inputbox" value="" id="userinput"/><p/> 
    <INPUT TYPE="button" name="button" Value="Click" onClick="javascript:testResults(this.form);"/> 
</form> 

<form id="outputForm" name="outputForm" action="" method="POST"> 
    <div align="center"> 
     <textarea cols="40" rows="5" id="output" name="output">'Now we are inside the area - which is nice.' </textarea> 
    </div> 
</form> 

</body> 
</html> 

請注意兩件事情:

  1. 您有兩個標籤完全相同的名稱「myform」。此外,您的表單定義不是有效的HTML,因爲您有兩個開放標籤和一個結束標籤。

  2. 通過向標記添加「id」屬性,可以使用document.getElementById()引用它們。這是選擇標籤的一種非常精確和方便的方式。

學習本機Javascript肯定是件好事。不過,也要看看jQuery和其他Javascript庫。在jQuery中選擇和操作標籤比在本地JavaScript中更容易和更方便。

玩得開心!