almacenando la entrada del usuario en la matriz

Necesito hacer lo siguiente (soy un principiante en programación así que discúlpeme por mi ignorancia): tengo que pedirle al usuario tres datos diferentes en tres cuadros de texto diferentes en una formar. Luego el usuario tiene un botón llamado "enter" y cuando hace clic en él los textos que ingresó en los tres campos deben almacenarse en tres arreglos diferentes, en esta etapa también quiero ver que la información del usuario para verificar los datos se está almacenando en el conjunto. He intentado infructuosamente hacer que la aplicación almacene o muestre los datos en solo una de las matrices. Tengo 2 archivos: film.html y functions.js. Aquí está el código. ¡Cualquier ayuda será apreciada!almacenando la entrada del usuario en la matriz

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

Fuente

2012-05-09 Diego Esquibel

No saldrá después de los valores. Lo que se necesita para reunirlos como esto:

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

se puede poner todo esto en una matriz:

var myArray = [ title, name, tickets ];

O muchas matrices:

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

O, si las matrices ya existe, puede usar su método .push() para insertar nuevos valores en él:

var titleArr = []; 

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

Su botón de guardar no funciona porque se refiere a this.form, sin embargo, no tiene un formulario en la página. Para que esto funcione necesita tener <form> etiquetas de embalar sus campos:

He hecho varias correcciones, y coloqué los cambios en jsbin: http://jsbin.com/ufanep/2/edit

El nuevo formulario sigue:

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

todavía hay cierto margen de mejora, tales como la eliminación de la att onclick ributes (esos enlaces deben hacerse a través de JavaScript, pero eso está más allá del alcance de esta pregunta).

También hice algunos cambios en su JavaScript. Comienzo creando tres matrices vacías:

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

Ahora que las tenemos, necesitaremos referencias a nuestros campos de entrada.

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

También estoy obteniendo una referencia a nuestro cuadro de visualización de mensajes.

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

La función insert() utiliza las referencias a cada campo de entrada para obtener su valor. A continuación, utiliza el método push() en las matrices respectivas para poner el valor actual en la matriz.

Una vez hecho, califica la función clearAndShow() que es responsable de borrar estos campos (preparándolos para la siguiente ronda de entrada) y mostrar los resultados combinados de las tres matrices.

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

clearAndShow(); 
}

Esta función, como se ha dicho anteriormente, comienza estableciendo la propiedad .value de cada entrada a una cadena vacía. Luego borra el .innerHTML de nuestro cuadro de mensaje. Por último, llama al método join() en todas nuestras matrices para convertir sus valores en una lista de valores separados por comas. Esta cadena resultante se pasa luego al cuadro de mensaje.

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

El resultado final puede ser utilizado en línea en http://jsbin.com/ufanep/2/edit

Fuente

2012-05-09 20:05:23 Sampson

No se olvide de .valorar estos para obtener el valor de lo que se ingresó en el campo de entrada –

¡Muchas gracias! ¡Este sitio es genial! Estudiaré tus correcciones y seguiré trabajando. Gracias de nuevo –

tiene al menos estas 3 cuestiones:

que no está recibiendo el valor del elemento adecuadamente
El div que son tratando de usar para mostrar si los valores se han guardado o no tiene ID display, pero en su javascript intenta obtener el elemento myDiv que ni siquiera está definido en su marcado.
Nunca variables de nombre con palabras clave reservadas en javascript. Usar "cadena" como nombre de variable NO es bueno para hacer en la mayoría de los idiomas que se me ocurren. Cambié el nombre de tu variable de cadena a "contenido". Vea abajo.

Puede guardar los tres valores a la vez haciendo:

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

Y a continuación, cambiar la función de presentación a:

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 
}

Aquí hay una jsfiddle para jugar alrededor.

Fuente

2012-05-09 20:30:03 Icarus

Muchas gracias! Voy a echar un vistazo y aplicar sus correcciones! –

almacenando la entrada del usuario en la matriz

Respuesta

Cuestiones relacionadas