将用户输入存储在数组中 [英] storing user input in array
问题描述
我需要做以下工作（我是编程初学者，所以请原谅我的无知）：我必须要求用户在表单上的三个不同文本框中输入三条不同的信息。然后，用户有一个名为enter的按钮，当他点击它时，他在三个字段中输入的文本应该存储在三个不同的数组上，在这个阶段，我也希望看到用户的输入来检查数据是否实际存储在数组中。我试图让应用程序只在其中一个数组上存储或显示数据，但没有成功。我有2个文件：film.html和functions.js。这是代码。任何帮助将不胜感激！
< html>
< head>
< title>电影资讯< / title>
< script src =jQuery.jstype =text / javascript>< / script>
< script src =functions.jstype =text / javascript>< / script>
< / head>
< body>
< div id =form>
< h1>< b>请输入资料< / b>< / h1>
< hr size =3/>
< br>
< label for =title>标题< / label> < input id =titletype =text>
< br>
< label for =name> Actor< / label>< input id =nametype =text>
< br>
< label for =tickets> ticket< / label>< input id =ticketstype =text>
< br>
< br>
< input type =buttonvalue =Saveonclick =insert（this.form.title.value）>
< input type =buttonvalue =显示数据onclick =show（）> <峰; br>
< h2>< b>资料：< / b>< / h2>
< hr>
< / div>
< div id =display>
< / div>
< / body>
< / html>
var title = new Array（）;
var name = new Array（）;
var tickets = new Array（）;
函数insert（val）{
title [title.length] = val;
}
函数show（）{
var string =< b>数组的所有元素：< / b>< br>;
for（i = 0; i
}
if（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 = [];
函数addTitle（title）{
titleArr.push（title）;
console.log（Titles：+ titleArr.join（，））;
$ b 您的保存按钮不起作用，因为您引用了 this.form ，但是您没有页面上的表单。为了实现此目的，您需要将< form> 标签包装到您的字段中：
我做了一些更正，并将更改放在jsbin上： http://jsbin.com/ufanep/2/edit
：
< form>
< h1>请输入资料< / h1>
< input id =titletype =text/>
< input id =nametype =text/>
< input id =ticketstype =text/>
< input type =buttonvalue =Saveonclick =insert（）/>
< input type =buttonvalue =显示数据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（）函数，并显示三者的组合结果数组。。
函数insert（）{
titles.push（titleInput.value）;
names.push（nameInput.value）;
tickets.push（ticketInput.value）;
clearAndShow（）;
$ b $ p
$ b 如前所述，该函数首先设置 .value 将每个输入的属性转换为空字符串。然后清除消息框中的 .innerHTML 。最后，它调用我们所有数组上的 join（）方法，将它们的值转换为逗号分隔值列表。然后传递到消息框中。
函数clearAndShow（）{
titleInput.value = ;
nameInput.value =;
ticketInput.value =;
messageBox.innerHTML =;
messageBox.innerHTML + =标题：+ titles.join（，）+< br />;
messageBox.innerHTML + =Names：+ names.join（，）+< br />;
messageBox.innerHTML + =Tickets：+ tickets.join（，）;
}
最终结果可以在线使用 http://jsbin.com/ufanep/2/edit
I need to do the following (I'm a beginner in programming so please excuse me for my ignorance): I have to ask the user for three different pieces of information on three different text boxes on a form. Then the user has a button called "enter"and when he clicks on it the texts he entered on the three fields should be stored on three different arrays, at this stage I also want to see the user's input to check data is actually being stored in the array. I have beem trying unsuccessfully to get the application to store or show the data on just one of the arrays. I have 2 files: film.html and functions.js. Here's the code. Any help will be greatly appreciated!
<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;
}
解决方案 You're not actually going out after the values. You would need to gather them like this:
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var tickets = document.getElementById("tickets").value;
You could put all of these in one array:
var myArray = [ title, name, tickets ];
Or many arrays:
var titleArr = [ title ];
var nameArr = [ name ];
var ticketsArr = [ tickets ];
Or, if the arrays already exist, you can use their .push() method to push new values onto it:
var titleArr = [];
function addTitle ( title ) {
titleArr.push( title );
console.log( "Titles: " + titleArr.join(", ") );
}
Your save button doesn't work because you refer to this.form, however you don't have a form on the page. In order for this to work you would need to have <form> tags wrapping your fields:
I've made several corrections, and placed the changes on jsbin: http://jsbin.com/ufanep/2/edit
The new form follows:
<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>
There is still some room for improvement, such as removing the onclick attributes (those bindings should be done via JavaScript, but that's beyond the scope of this question).
I've also made some changes to your JavaScript. I start by creating three empty arrays:
var titles = [];
var names = [];
var tickets = [];
Now that we have these, we'll need references to our input fields.
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
I'm also getting a reference to our message display box.
var messageBox = document.getElementById("display");
The insert() function uses the references to each input field to get their value. It then uses the push() method on the respective arrays to put the current value into the array.
Once it's done, it cals the clearAndShow() function which is responsible for clearing these fields (making them ready for the next round of input), and showing the combined results of the three arrays.
function insert ( ) {
titles.push( titleInput.value );
names.push( nameInput.value );
tickets.push( ticketInput.value );
clearAndShow();
}
This function, as previously stated, starts by setting the .value property of each input to an empty string. It then clears out the .innerHTML of our message box. Lastly, it calls the join() method on all of our arrays to convert their values into a comma-separated list of values. This resulting string is then passed into the message box.
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(", ");
}
The final result can be used online at http://jsbin.com/ufanep/2/edit
这篇关于将用户输入存储在数组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
