将javascript数组转换为textarea答案

【问题标题】：convert javascript array into textarea将javascript数组转换为textarea
【发布时间】：2012-09-24 05:12:22
【问题描述】：

只是自学 javascript，我试图让我的代码读取用户的输入，然后将它们打印到文本区域，但到目前为止我一直没有成功。

到目前为止，我只是使用警报来测试我的代码是否将输入存储在我设置的数组中。

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

我知道它的基本原理，但我似乎无法正确理解，感谢您提供的任何帮助。

【问题讨论】：

标签： javascript arrays textarea

【解决方案1】：

alert 调用应该写成如下

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

代替i，你写了1。

并且，在执行i++ 之前，添加以下行：

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

现在，您正在动态更改textarea 的内容。

【讨论】：

【解决方案2】：

更新你的陈述

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.

【讨论】：

【解决方案3】：

好的，我只是继续修复一些问题...对您的示例进行了一些小修正。（和一些编辑以满足我的语法特定的眼睛）我使用了 jQuery。（如果你不想使用，请使用原生 JS）

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

表格也一样，只是在textarea中加了一个Id="outputTa"

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

【讨论】：

【解决方案4】：

<SCRIPT LANGUAGE="JavaScript">

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

【讨论】：

【解决方案5】：

这就是你想做的..我用过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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

这里有一个解决方案：

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

请注意几点：

您有两个名称完全相同的标签“myform”。此外，您的表单定义不是有效的 HTML，因为您有两个打开标记和一个结束标记。
通过向标签添加“id”属性，可以使用 document.getElementById() 来引用它们。这是一种非常精确和方便的标签选择方式。

学习原生 Javascript 无疑是一件好事。不过，也请看看 jQuery 和其他 Javascript 库。在 jQuery 中选择和操作标签比在原生 Javascript 中更容易和方便。

玩得开心！

【讨论】：