Javascript 在数组中存储用户输入_Javascript_Arrays_Forms

Javascript 在数组中存储用户输入

javascript arrays forms

Javascript 在数组中存储用户输入,javascript,arrays,forms,Javascript,Arrays,Forms,我需要做以下工作（我是编程新手，请原谅我的无知）：我必须向用户询问表单上三个不同文本框上的三条不同信息。然后，用户有一个名为“enter”的按钮，当他点击该按钮时，他在三个字段上输入的文本应存储在三个不同的数组中，在这个阶段，我还希望看到用户输入的检查数据是否实际存储在数组中。我一直试图让应用程序只在其中一个阵列上存储或显示数据，但没有成功。我有两个文件：film.html和functions.js。这是密码。任何帮助都将不胜感激 <html> <head>

我需要做以下工作（我是编程新手，请原谅我的无知）：我必须向用户询问表单上三个不同文本框上的三条不同信息。然后，用户有一个名为“enter”的按钮，当他点击该按钮时，他在三个字段上输入的文本应存储在三个不同的数组中，在这个阶段，我还希望看到用户输入的检查数据是否实际存储在数组中。我一直试图让应用程序只在其中一个阵列上存储或显示数据，但没有成功。我有两个文件：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;
  }


电影信息
请输入数据

标题


演员


票






数据：

var title=新数组（）；
var name=新数组（）；
var tickets=新数组（）；
函数插入（val）{
标题[标题.长度]=val；
}
函数show（）{
var string=“数组的所有元素：
”；
对于（i=0；i”；
}
如果（title.length>0）
document.getElementById（'myDiv'）。innerHTML=string；
}

您实际上并没有在这些值之后外出。您需要像这样收集它们：

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(", ") );
}

“保存”按钮不起作用，因为您引用了

此.form

，但是页面上没有表单。要使其正常工作，您需要在字段中添加

标记：

我已经做了一些更正，并将更改放在jsbin上：

新表格如下：

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

现在我们有了这些，我们需要对输入字段的引用

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(", ");
}

函数clearAndShow（）{
titleInput.value=“”；
nameInput.value=“”；
ticketInput.value=“”；
messageBox.innerHTML=“”；
messageBox.innerHTML+=“Titles:”+Titles.join（“，”+”）“
”；
messageBox.innerHTML+=“名称：”+Names.join（“，”+”）“
”；
messageBox.innerHTML+=“Tickets:+Tickets.join（“，”）；
}

最终结果可在线使用，网址为

您至少有以下3个问题：

您没有正确获取元素的值

您试图用来显示值是否已保存的div具有id

display

，但在javascript中，您试图获取元素

myDiv

，该元素甚至没有在标记中定义

从不在javascript中使用保留关键字命名变量。在我能想到的大多数语言中，使用“string”作为变量名不是一件好事。我将字符串变量重命名为“content”。见下文

通过执行以下操作，可以同时保存所有三个值：

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
}

函数显示（）{
var content=“数组的所有元素：
”；
对于（变量i=0；i”；
}
对于（var i=0；i”；
}
对于（变量i=0；i”；
}
document.getElementById（'display'）.innerHTML=content；//注意我已经更改了
//“显示”，因为这是
//您的标记中有什么
}

这里有一个供您使用的方法。

不要忘记。对这些进行估价，以获得输入字段中输入内容的值。非常感谢！这个网站太棒了！我会研究你的更正并继续工作。再次感谢，非常感谢！我会看一看并应用你的更正！

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
}