2

只是自学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>

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

4

7 回答 7

1

调用alert应该写成如下

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

代替i你写的1。

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

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

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

于 2012-09-24T05:18:35.293 回答
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.
于 2012-09-24T05:18:50.167 回答
1

Ok, i just went ahead to fix something up...minor corrections in your sample. (and some edits to satisfy my syntax specific eyes) I used jQuery. (use native JS incase you don't want to use it)

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

The form is just the same, just added an Id="outputTa" to the 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>
于 2012-09-24T05:22:57.357 回答
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 中更容易、更方便。

玩得开心！

于 2012-09-24T06:05:24.010 回答
0 
<SCRIPT LANGUAGE="JavaScript">

    function testResults (form) {
        TestVar= form.inputbox.value;
        alert ("You typed: " + TestVar);
    }
    </SCRIPT>
于 2012-09-24T05:21:08.770 回答
0

This is what you want to do.. I have used jQuery, you can remove jQuery and use native 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

于 2012-09-24T05:22:44.883 回答
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>​
于 2012-09-24T05:28:34.723 回答