将用户输入存储在数组中

时间:2012-05-09 19:56:23

标签: javascript arrays forms

我需要做以下事情(我是编程的初学者,所以请原谅我的无知):我必须向用户询问表格上三个不同文本框的三个不同信息。然后用户有一个名为“enter”的按钮,当他点击它时,他在三个字段上输入的文本应该存储在三个不同的数组上,在这个阶段我还想看到用户输入检查数据实际上是存储的在数组中。我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;
  }

2 个答案:

答案 0 :(得分:18)

你实际上并没有在值之后出去。你需要像这样收集它们:

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()方法将当前值放入数组中。

一旦完成,它会调用负责清除这些字段的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

在线使用

答案 1 :(得分:2)

你至少有这3个问题:

  1. 你没有正确获得元素的价值
  2. 您尝试用来显示值是否已保存的div在您的javascript中已标识为display,您尝试获取元素myDiv,该元素甚至未在您的标记中定义
  3. 从不在javascript中为保留关键字命名变量。使用“string”作为变量名称对我能想到的大多数语言都不是一件好事。我将您的字符串变量重命名为“content”。见下文。
  4. 您可以通过执行以下操作一次保存所有三个值:

    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