8

次のことを行う必要があります (私はプログラミングの初心者なので、無知であることをお許しください): ユーザーに、フォームの 3 つの異なるテキスト ボックスで 3 つの異なる情報を要求する必要があります。次に、ユーザーには「入力」というボタンがあり、それをクリックすると、3 つのフィールドに入力したテキストが 3 つの異なる配列に保存されます。この段階で、データが実際に保存されていることを確認するためにユーザーの入力も確認したいと思います。配列で。アプリケーションがデータを 1 つのアレイだけに格納または表示するようにしようとして失敗しました。film.html と functions.js の 2 つのファイルがあります。これがコードです。どんな助けでも大歓迎です!

<html>
    <head>
    <title>Film info</title>

    <script src="jQuery.js" type="text/javascript"></script>
    <script src="functions.js" type="text/javascript"></script>

    </head>
        <body>

        <div id="form">

            <h1><b>Please enter data</b></h1>
        <hr size="3"/>
        <br>

            <label for="title">Title</label> <input id="title" type="text" > 
        <br>

            <label for="name">Actor</label><input id="name" type="text">
        <br>

            <label for="tickets">tickets</label><input id="tickets" type="text">
        <br>
        <br>

            <input type="button" value="Save" onclick="insert(this.form.title.value)">
            <input type="button" value="Show data" onclick="show()"> <br>

            <h2><b>Data:</b></h2>
        <hr>
        </div>

        <div id= "display">

        </div>
        </body>

</html>

var title=new Array();
var name=new Array();
var tickets=new Array();

function insert(val){
  title[title.length]=val;
  }

function show() {
  var string="<b>All Elements of the Array :</b><br>";
  for(i = 0; i < title.length; i++) {
  string =string+title[i]+"<br>";
  }
  if(title.length > 0)
 document.getElementById('myDiv').innerHTML = string;
  }
4

2 に答える 2

18

あなたは実際に値を求めて外出しているわけではありません。次のようにそれらを収集する必要があります。

var title   = document.getElementById("title").value;
var name    = document.getElementById("name").value;
var tickets = document.getElementById("tickets").value;

これらすべてを 1 つの配列に入れることができます。

var myArray = [ title, name, tickets ];

または多くの配列:

var titleArr   = [ title ];
var nameArr    = [ name ];
var ticketsArr = [ tickets ];

または、配列が既に存在する場合は、それらの.push()メソッドを使用して新しい値を配列にプッシュできます。

var titleArr = [];

function addTitle ( title ) {
  titleArr.push( title );
  console.log( "Titles: " + titleArr.join(", ") );
}

を参照しているため、保存ボタンが機能しませthis.formんが、ページにフォームがありません。これを機能させるには<form>、フィールドを囲むタグが必要です。

私はいくつかの修正を行い、変更を jsbin に配置しました: http://jsbin.com/ufanep/2/edit

新しいフォームは次のとおりです。

<form>
  <h1>Please enter data</h1>
  <input id="title" type="text" />
  <input id="name" type="text" />
  <input id="tickets" type="text" />
  <input type="button" value="Save" onclick="insert()" />
  <input type="button" value="Show data" onclick="show()" />
</form>
<div id="display"></div>

属性を削除するなど、まだ改善の余地がありonclickます (これらのバインディングは JavaScript を介して行う必要がありますが、それはこの質問の範囲を超えています)。

また、JavaScript にいくつかの変更を加えました。まず、3 つの空の配列を作成します。

var titles  = [];
var names   = [];
var tickets = [];

これらが揃ったので、入力フィールドへの参照が必要になります。

var titleInput  = document.getElementById("title");
var nameInput   = document.getElementById("name");
var ticketInput = document.getElementById("tickets");

メッセージ表示ボックスへの参照も取得しています。

var messageBox  = document.getElementById("display");

このinsert()関数は、各入力フィールドへの参照を使用して値を取得します。次にpush()、それぞれの配列でメソッドを使用して、現在の値を配列に入れます。

完了すると、clearAndShow()これらのフィールドをクリアする (次の入力ラウンドの準備を整える) 関数を呼び出し、3 つの配列の結合結果を表示します。

function insert ( ) {
 titles.push( titleInput.value );
 names.push( nameInput.value );
 tickets.push( ticketInput.value );

 clearAndShow();
}

この関数は、前述のように、.value各入力のプロパティを空の文字列に設定することから始まります。.innerHTML次に、メッセージ ボックスをクリアします。最後に、join()すべての配列でメソッドを呼び出して、それらの値をカンマ区切りの値のリストに変換します。この結果の文字列は、メッセージ ボックスに渡されます。

function clearAndShow () {
  titleInput.value = "";
  nameInput.value = "";
  ticketInput.value = "";

  messageBox.innerHTML = "";

  messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
  messageBox.innerHTML += "Names: " + names.join(", ") + "<br/>";
  messageBox.innerHTML += "Tickets: " + tickets.join(", ");
}

最終結果は、http://jsbin.com/ufanep/2/editでオンラインで使用できます。

于 2012-05-09T20:05:23.857 に答える
3

少なくとも次の3つの問題があります。

  1. 要素の値を正しく取得していません
  2. 値が保存されているかどうかを表示するために使用しようとしているdivはdisplay、JavaScriptにまだIDmyDivがあり、マークアップでさえ定義されていない要素を取得しようとしています。
  3. javascriptで予約済みのキーワードを使用して変数に名前を付けないでください。変数名として「文字列」を使用することは、私が考えることができるほとんどの言語で行うのは良いことではありません。代わりに、文字列変数の名前を「content」に変更しました。下記参照。

次の手順を実行すると、3つの値すべてを一度に保存できます。

var title=new Array();
var names=new Array();//renamed to names -added an S- 
                      //to avoid conflicts with the input named "name"
var tickets=new Array();

function insert(){
    var titleValue = document.getElementById('title').value;
    var actorValue = document.getElementById('name').value;
    var ticketsValue = document.getElementById('tickets').value;
    title[title.length]=titleValue;
    names[names.length]=actorValue;
    tickets[tickets.length]=ticketsValue;
  }

次に、show関数を次のように変更します。

function show() {
  var content="<b>All Elements of the Arrays :</b><br>";
  for(var i = 0; i < title.length; i++) {
     content +=title[i]+"<br>";
  }
  for(var i = 0; i < names.length; i++) {
     content +=names[i]+"<br>";
  }
  for(var i = 0; i < tickets.length; i++) {
     content +=tickets[i]+"<br>";
  }
  document.getElementById('display').innerHTML = content; //note that I changed 
                                                    //to 'display' because that's
                                              //what you have in your markup
}

これがあなたが遊んでくれるjsfiddleです。

于 2012-05-09T20:30:03.370 に答える