将用户输入存储在数组中 [英] storing user input in array

查看：24
本文介绍了将用户输入存储在数组中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要执行以下操作(我是编程初学者，所以请原谅我的无知): 我必须在表单上的三个不同文本框中向用户询问三个不同的信息.然后用户有一个名为输入"的按钮，当他点击它时，他在三个字段上输入的文本应该存储在三个不同的数组中，在这个阶段我还想看到用户输入的检查数据实际上是否被存储在数组中.我一直试图让应用程序仅在其中一个阵列上存储或显示数据，但未成功.我有 2 个文件:film.html 和 functions.js.这是代码.任何帮助将不胜感激！

<头><title>电影信息</title><script src="jQuery.js" type="text/javascript"></script><script src="functions.js" type="text/javascript"></script><身体><div id="表单"><h1><b>请输入数据</b></h1><hr size="3"/><br><label for="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="显示数据" onclick="show()"><br><h2><b>数据:</b></h2><小时>

<div id="显示">

var title=new Array();var name=new Array();无功票=新数组()；函数插入(val){标题[title.length]=val;}功能显示(){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 ticket = document.getElementById("tickets").value;

您可以将所有这些放在一个数组中:

var myArray = [ 标题, 姓名, 门票];

或多个数组:

var titleArr = [ title ];var nameArr = [名称];var ticketArr = [门票];

或者，如果数组已经存在，您可以使用它们的 .push() 方法向其推送新值:

var titleArr = [];函数添加标题(标题){titleArr.push( 标题);console.log("标题:" + titleArr.join(", "));}

您的保存按钮不起作用，因为您引用了 this.form，但是页面上没有表单.为了让这个工作，你需要有 <form> 标签来包装你的字段:

我做了几处更正，并将更改放在 jsbin 上:http://jsbin.com/ufanep/2/编辑

新表格如下:

<h1>请输入数据</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="显示数据" onclick="show()"/></表单><div id="显示"></div>

仍有一些改进空间，例如删除 onclick 属性(这些绑定应该通过 JavaScript 完成，但这超出了本问题的范围).

我还对您的 JavaScript 进行了一些更改.我首先创建三个空数组:

var titles = [];变量名 = [];var 门票 = [];

既然我们有了这些，我们将需要对输入字段的引用.

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

我也得到了对我们的消息显示框的引用.

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

insert() 函数使用对每个输入字段的引用来获取它们的值.然后在各个数组上使用 push() 方法将当前值放入数组中.

完成后，它会调用 clearAndShow() 函数，该函数负责清除这些字段(使它们为下一轮输入做好准备)，并显示三个数组的组合结果.

函数插入 ( ) {titles.push( titleInput.value );名称.推(名称输入.值)；票证.推送(票证输入值)；clearAndShow();}

如前所述，此函数首先将每个输入的 .value 属性设置为空字符串.然后它会清除我们消息框的 .innerHTML.最后，它对我们所有的数组调用 join() 方法，将它们的值转换为逗号分隔的值列表.然后将此结果字符串传递到消息框中.

function clearAndShow() {titleInput.value = "";nameInput.value = "";ticketInput.value = "";messageBox.innerHTML = "";messageBox.innerHTML += "标题:" + titles.join(", ") + "
";messageBox.innerHTML += "名称:" + names.join(", ") + "
";messageBox.innerHTML += "门票:" + ticket.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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆