All geek questions in one place

Storing user input in an array

I need to do the following (I'm new to programming, so please excuse my ignorance): I have to ask the user three different pieces of information in three different text fields on the form. Then the user has a button called "enter", and when he clicks on it, the texts that he entered on three fields should be stored on three different arrays, at this point I also want the user input to check the data to be actually stored in an array. I unsuccessfully try to force the application to store or display data on only one of the arrays. I have 2 files: film.html and functions.js. Here is the code. Any help would 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; }
+6
source share
2 answers

You really don't go after the values. You will need to assemble them like this:

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

You can put all this into one array:

 var myArray = [ title, name, tickets ];

Or many arrays:

 var titleArr = [ title ]; var nameArr = [ name ]; var ticketsArr = [ tickets ];

Or, if arrays already exist, you can use their .push() method to push new values ​​on it:

 var titleArr = []; function addTitle ( title ) { titleArr.push( title ); console.log( "Titles: " + titleArr.join(", ") ); }

Your save button does not work because you are referring to this.form , however you do not have a form on the page. To do this, you will need to have <form> tags wrapping your fields:

I made some corrections and posted the changes to jsbin: http://jsbin.com/ufanep/2/edit

New form:

 <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 something else to improve, such as removing onclick attributes (these bindings must be done using JavaScript, but this is beyond the scope of this question).

I also made some changes to your JavaScript. I start by creating three empty arrays:

 var titles = []; var names = []; var tickets = [];

Now that we have it, we will need links to our input fields.

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

I also get a link to the message display window.

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

The insert() function uses references for each input field to get their value. He then uses the push() method for the corresponding arrays to put the current value into the array.

After that, it performs the clearAndShow() function, which is responsible for clearing these fields (their readiness for the next input round) and displaying the combined results of three arrays.

 function insert ( ) { titles.push( titleInput.value ); names.push( nameInput.value ); tickets.push( ticketInput.value ); clearAndShow(); }

This function, as indicated above, begins by setting the .value property of each entry to an empty string. Then it clears the .innerHTML our message box. Finally, he calls the join() method on all our arrays to convert their values ​​to a comma-separated list of values. This line is then passed to the message field.

 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 end result can be used on the Internet at http://jsbin.com/ufanep/2/edit

+17
source

You have at least these 3 problems:

  • you are not getting the value of the element correctly
  • There is an id display in the div that you are trying to use to display whether the values ​​were saved or not, but in your javascript you are trying to get the myDiv element, which is not even defined in your markup.
  • Never list variables with reserved keywords in javascript. using "string" as the variable name MUST NOT be done in most languages ​​that I can think of. Instead, I renamed your string variable to "content". See below.

You can save all three values ​​at once by doing:

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

And then change the show function to:

 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 }

Here is jsfiddle for you.

+2
source

Source: https://habr.com/ru/post/915323/

More articles:


All Articles