Question

只是教自己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>

我知道它的基本功能，但我似乎无法做到正确，感谢任何帮助。

Answer 1

alert来电应写成如下

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

取代i您已撰写1。

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

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

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

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

Answer 3

好的，我只是继续修理一下......样品中的微小修正。（和一些编辑，以满足我的语法特定的眼睛）我用过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>

Answer 4

<SCRIPT LANGUAGE="JavaScript">

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

Answer 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

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

Answer 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中更容易和更方便。

玩得开心！

将javascript数组转换为textarea

7 个答案: