在阵列中存储的用户输入(storing user input in array)

我需要做下面的（我是一个初学编程，请原谅我我的无知）：我要问三个不同的文本框三个不同的信息用户在表单上。然后，用户有一个名为“进入”按钮，当他点击它，他在这三个字段中输入的文本应存储在三个不同的阵列，在这个阶段，我也想看看用户的输入检查数据实际存储在阵列。我有BEEM尝试失败让存储或显示阵列上的只是一个数据的应用程序。我有2个文件：film.html和functions.js。下面的代码。任何帮助将不胜感激！

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

Answer 1:

值后，你没有真正走出去。你会需要收集他们是这样的：

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

你可以把所有这些在一个阵列：

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。我开始通过创建三个空数组：

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()的相应阵列上的方法，将当前值到阵列。

一旦完成，它CALS的clearAndShow()函数，它是负责清除这些字段（让他们准备好下一轮的输入），并呈现三个阵列的组合的结果。

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

Answer 2:

你必须至少这3个问题：

你没有得到正确的元素的值
您尝试使用显示值是否已被保存或不div有ID display尚未在JavaScript试图获得元素myDiv它甚至没有您的标记定义。
决不名与JavaScript的保留关键字的变量。使用“字符串”作为变量名是不是做的最让我能想到的语言是一件好事。我改名为您的字符串变量设置为“内容”来代替。见下文。

您可以通过执行保存一次所有三个值：

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

然后更改放映功能：

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给你玩。

文章来源: storing user input in array