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

わかりました、私は何かを修正するために先に進みました...あなたのサンプルのマイナーな修正。(および私の構文固有の目を満足させるためのいくつかの編集) jQuery を使用しました。(使いたくない場合はネイティブ JS を使用してください)

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

フォームはまったく同じで、テキストエリアに 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>
于 2012-09-24T05:22:57.357 に答える
0 
<SCRIPT LANGUAGE="JavaScript">

    function testResults (form) {
        TestVar= form.inputbox.value;
        alert ("You typed: " + TestVar);
    }
    </SCRIPT>
于 2012-09-24T05:21:08.770 に答える
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());
});

JSFミドル リンク

于 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 に答える
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」というまったく同じ名前のタグが 2 つありました。また、2 つの開始タグと 1 つの終了タグしかないため、フォーム定義は有効な HTML ではありませんでした。

  2. タグに「id」属性を追加することで、document.getElementById() を使用してタグを参照できるようになります。これは、タグを選択するための非常に正確で便利な方法です。

ネイティブ Javascript を学ぶことは確かに良いことです。ただし、jQuery やその他の Javascript ライブラリも参照してください。タグの選択と操作は、ネイティブ Javascript よりも jQuery の方がはるかに簡単で便利です。

楽しむ！

于 2012-09-24T06:05:24.010 に答える