JavaScript - Add Value from input box to array - Stack Overflow

admin管理员组

文章数量:1302450

The objective is to add another item to the array, and make an array like ["Car", "House" , "Boat"] etc.

What is happening is when i console log, i only have one item in my array and not all the values i submit from form.

This is my form

<form onsubmit="guardarNumeros()">
 <p>Please insert the items</p>
 <input type="text" id="box">
 <input type="submit" value="Submit">
</form>

My js

function guardarNumeros(){

 var items = [];
 boxvalue = document.getElementById('box').value;
 items.push(boxvalue);  
 console.log(items);

}

Thank You !

The objective is to add another item to the array, and make an array like ["Car", "House" , "Boat"] etc.

What is happening is when i console log, i only have one item in my array and not all the values i submit from form.

This is my form

<form onsubmit="guardarNumeros()">
 <p>Please insert the items</p>
 <input type="text" id="box">
 <input type="submit" value="Submit">
</form>

My js

function guardarNumeros(){

 var items = [];
 boxvalue = document.getElementById('box').value;
 items.push(boxvalue);  
 console.log(items);

}

Thank You !

• javascript

Share Improve this question Follow asked Nov 2, 2017 at 15:05 Hugo SeleiroHugo Seleiro 2,65766 gold badges3030 silver badges4444 bronze badges 5

• You only push a single item. How exactly do you input the values? – Sebastian Simon Commented Nov 2, 2017 at 15:07
• You mean the user enters multiple values into the “box” input field? So is this about splitting the string into tokens? – Patrick Hund Commented Nov 2, 2017 at 15:07
• also you want to do <form onsubmit="return guardarNumeros()"> and end the function with return false; to not start with an empty item each time due to a reloaded page – mplungjan Commented Nov 2, 2017 at 15:08
• well everytime you call guardarNumeros you redefine your array.... so.... – epascarello Commented Nov 2, 2017 at 15:15
• Thanks for the help ! – Hugo Seleiro Commented Nov 2, 2017 at 16:13

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 13

Your items array is within the scope of your guardarNumeros function and will get declared every time guardarNumeros is called, if you want it to persist it needs to be outside:

var items = [];

function guardarNumeros() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);  
  console.log(items);
}

As mentioned in the comments a form submission will refresh the page by default, to prevent this you need to return false:

<form onsubmit="return guardarNumeros()">

---

function guardarNumeros() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);  
  console.log(items);
  return false;
}

http://plnkr.co/edit/mGLCT97QwM8CvD3I5yUp?p=preview

By including the items inside the scope of your functions you were declaring the array every time.

var items = [];

function guardarNumeros() {
  boxvalue = document.getElementById('box').value;
  items.push(boxvalue);
  console.log(items);
  return false; // stop submission
}

<form onsubmit="return guardarNumeros()">
  <p>Please insert the items</p>
  <input type="text" id="box">
  <input type="submit" value="Submit">
</form>

You have to declare the array outside the function. because whenever you hit the submit button a new array object is being created and the previous one is being lost because of scope.

You know if we declare a variable inside any function this variable is only visible in this function. Outside this function we can't access it. In your case you declare an array inside the function, then push value to it and also log it. But if you try to access this array from outside the function you will get error if you use strict mode.

Just declare the array in global scope, or also you can pass the array as an argument. this will solve your problem..

var items = [];

function guardarNumeros(){

 boxvalue = document.getElementById('box').value;
 items.push(boxvalue);  
 console.log(items);

}

Or use this. But make sure you declare the array anywhere in parent function where you call the function.

function guardarNumeros(items){

     boxvalue = document.getElementById('box').value;
     items.push(boxvalue);  
     console.log(items);

    }

In this case you also have to check some condition...

本文标签： JavaScriptAdd Value from input box to arrayStack Overflow