JavaScript - Add Value from input box to array

Question

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 !

You only push a single item. How exactly do you input the values? — Sebastian Simon, Nov 02 '17 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, Nov 02 '17 at 15:07
also you want to do `
` and end the function with `return false;` to not start with an empty item each time due to a reloaded page — mplungjan, Nov 02 '17 at 15:08
well everytime you call guardarNumeros you redefine your array.... so.... — epascarello, Nov 02 '17 at 15:15

UncleDave · Accepted Answer · 2017-11-02T15:12:30.867

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

edited Nov 02 '17 at 15:12

answered Nov 02 '17 at 15:08

UncleDave

6,872
1
26
44

Thank you very much for the help ! – Hugo Seleiro Nov 02 '17 at 16:13
I just used this answer to fix my own problem, I was called the equivalent variable in my code to boxvalue outside of the function and getting a blank string in the array. – Dannyw24 Dec 14 '19 at 17:31

score 2 · Answer 2 · edited Nov 02 '17 at 15:13

2

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>

edited Nov 02 '17 at 15:13

mplungjan

169,008
28
173
236

answered Nov 02 '17 at 15:09

amyloula

1,556
2
17
26

Thanks for the help ! – Hugo Seleiro Nov 02 '17 at 16:12

score 2 · Answer 3 · answered Nov 02 '17 at 15:19

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

Thank You For the Help!! – Hugo Seleiro Nov 02 '17 at 16:12 — Hugo Seleiro, Nov 02 '17 at 16:12

JavaScript - Add Value from input box to array

3 Answers3

Linked