How do I store the string value from input field in an empty array?

Question

I'm having trouble storing input values from <input> tag in HTML into array of strings, I can't figure out how am I suppose to do that. I have an idea on how that might look like, however I still can't get it to work.

I believe that I have to use .push() and .join() method and += or + operator, it's just I do not know where to put them.

The first thing I did was searching on Google How to store string value from input in an array of strings? but I only found on how to do it using <form> tag in HTML and I can't do that. I can't use the <form> tag.

Here's the code that I think should look like

<body>
  <input type="text" id="input" />
  <button onclick="submit()">Submit</button>
  <div id="placeholder"></div>
</body>

var inputName = document.getElementById("input");
var cityArray = [""];

// This triggers immediately when the browser loads
window.onload = (
  // Pickup the string from input and add it on the previously created array
  function submit() {
    inputName.value;

    for (var i = 0; i < array.length; i++) {
      array[i];
    }
  }
);

I also need a piece of code that will delete the value that was typed in a <input> field right after the Submit button is pressed, so that the user doesn't need to press Backspace in order to type the second input value.

You have a number of syntax errors. Please make sure your example is a minimal reproducible example. — evolutionxbox
– evolutionxbox, Commented Aug 10, 2017 at 13:33
@evolutionbox Yes, array is not defined, because I've typed for in Atom and pressed the Tab key. I've left that there as a "placeholder". — Vladimir Jovanović
– Vladimir Jovanović, Commented Aug 10, 2017 at 13:36

N. Ivanov · Accepted Answer · 2017-08-10 13:34:39Z

3

Here is a working code snippet.

When you click the submit button, that will call the submit() function. Since your array is defined to be global, you can access it within the function. You do not need to iterate over the array, and you can simply use the .push() method to easily append a string to your array.

var inputName = document.getElementById("input");
var cityArray = [];


function submit() {
  cityArray.push(inputName.value);
  console.log(cityArray);
}

<body>
  <input type="text" id="input" />
  <button onclick="submit()">Submit</button>
  <div id="placeholder"></div>
</body>

Hope this helps!

edited Aug 10, 2017 at 13:34

answered Aug 10, 2017 at 13:33

N. Ivanov

1,8332 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

evolutionxbox Over a year ago

Can you add more than just the code? I personally feel "Hope this helps" is not enough.

N. Ivanov Over a year ago

I am just editing it. Including explanations! thanks!

Vladimir Jovanović Over a year ago

Both of the provided answers work, but this one has more info. So, up-voted and verified as accepted answer. Thanks.

N. Ivanov Over a year ago

@VladimirJovanović you are very welcome. If I may ask you to mark the answer as accepted, so future visitors can solve their issues faster? Thanks!

cнŝdk · Accepted Answer · 2017-08-10 13:47:18Z

1

Yes you need to use .push() method it will add the new entered string to the array, without the need to iterate it:

function submit() {
   cityArray.push(inputName.value);

}

And you need to initialize your array as an empty array with [] :

var cityArray = [];

And you don't need to create the submit function in the body.onload event handler because it won't be accessible outside of it and may lead for an error.

Demo:

var inputName = document.getElementById("input");
var cityArray = [];


function submit() {
  cityArray.push(inputName.value);
  console.log(cityArray);
}

<input type="text" id="input" />
<button onclick="submit()">Submit</button>
<div id="placeholder"></div>

edited Aug 10, 2017 at 13:47

answered Aug 10, 2017 at 13:36

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

2 Comments

Vladimir Jovanović Over a year ago

Ok, I'll do that. Thanks.

Vladimir Jovanović Over a year ago

Thank you, that helped. It works now. Up-voted your answer.

user7110739 · Accepted Answer · 2017-08-10 13:42:05Z

0

Js Code

//declare your array like this
var yourArray = new Array();
//To add items to array:
yourArray.push(yourString);
//To get you can use indexing like(almost any other language)
yourArray[i]
//You can even set as an object array like this:
yourArray.push({
  text: 'blablabla'
})
//So, in your case, filling up the array could be something like this:
var inputText = document.getElementById('input').value;
yourArray.push(inputText);
// show it
for (var i = 0; i < yourArray.length; i++) {
  alert(yourArray[i]);
}

HTML Script

<body>
  <input type="text" id="input" />
  <button onclick="submit()">Submit</button>
  <div id="placeholder"></div>
</body>

answered Aug 10, 2017 at 13:42

user7110739

Collectives™ on Stack Overflow

How do I store the string value from input field in an empty array?

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related