memorizzare l'input dell'utente in matrix

Devo fare quanto segue (io sono un principiante nella programmazione per cui mi scusi per la mia ignoranza): devo chiedere all'utente tre diversi elementi di informazioni su tre diverse caselle di text in un module. Allora l'utente ha un button chiamato "entra" e quando fa clic su di esso i testi che ha inserito nei tre campi dovrebbero essere memorizzati su tre diversi arrays, in questa fase voglio anche vedere l'input dell'utente per verificare che i dati siano effettivamente memorizzati nell'arrays. Ho iniziato a provare senza successo per get l'applicazione per memorizzare o mostrare i dati su un solo arrays. Ho 2 file: film.html e functions.js. Ecco il codice. Qualsiasi aiuto sarà molto apprezzato!

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

In realtà non stai uscendo dopo i valori. Avrebbe bisogno di riunirli come questo:

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

Potresti mettere tutti questi in un arrays:

 var myArray = [ title, name, tickets ]; 

Oppure molti arrays:

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

Oppure, se gli arrays esistono già, è ansible utilizzare il metodo di .push() per spingere nuovi valori su di esso:

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

Il button di salvataggio non funziona perché si fa riferimento a this.form , tuttavia non hai un module nella pagina. Per far funzionare questo, dovresti avere tag <form> avvolge i campi:

Ho eseguito diverse correzioni e ho inserito le modifiche su jsbin: http://jsbin.com/ufanep/2/edit

La nuova forma segue:

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

C'è ancora spazio per migliorare, come la rimozione degli attributi onclick (tali connessioni dovrebbero essere eseguite tramite JavaScript, ma è al di là della portta di questa domanda).

Ho anche apportto alcune modifiche al tuo JavaScript. Inizio creando tre arrays vuoti:

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

Ora che abbiamo questi, avremo bisogno di riferimenti ai nostri campi di input.

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

Ricevo anche un riferimento alla nostra casella di visualizzazione dei messaggi.

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

La function insert() utilizza i riferimenti ad each field di input per get il loro valore. Utilizza quindi il metodo push() sui rispettivi arrays per mettere il valore corrente nell'arrays.

Una volta che viene fatto, clearAndShow() function clearAndShow() che è responsabile della cancellazione di questi campi (rendendoli pronti per il prossimo round di input) e mostrando i risultati combinati dei tre arrays.

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

Questa function, come detto in precedenza, inizia impostando la properties; .value di each ingresso in una string vuota. Quindi annulla il .innerHTML della nostra casella di messaggio. Infine, chiama il metodo join() su tutti i nostri arrays per convertire i loro valori in un elenco di valori separato da virgole. Questa string risultante viene quindi passata nella casella di messaggio.

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

Il risultato finale può essere utilizzato online all'indirizzo http://jsbin.com/ufanep/2/edit

Hai alless questi tre numbers:

  1. non ottieni il valore dell'elemento correttamente
  2. Il div che si sta tentando di utilizzare per visualizzare se i valori sono stati salvati o less non ha ancora l'ID nel tuo javascript si tenta di get elemento myDiv che non è ancora definito nel tuo markup.
  3. Mai denominare variables con parole chiave riservate nel javascript. usare "string" come un nome di variabile NON è una buona cosa da fare sulla maggior parte delle lingue che posso pensare. Ho cambiato la tua variabile di string a "contenuto". Vedi sotto.

È ansible salvare tutti e tre i valori contemporaneamente:

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

E quindi cambiare la function di spettacolo su:

 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 } 

Ecco un jsfiddle per giocare.