September 14, 2021
How to Append Value to an Array from Input Text in Javascript
In this tutorial, you will learn how to append value to an array from input text in javascript. Arrays are nothing more than a collection of items and we do have certain methods to add or remove items from an array.
The 2 methods to add an item to an array are unshift()
and push()
. The unshift()
method inserts an item at the beginning of an array and the push()
method inserts an item at the end of an array. We will use the push()
method to achieve our goal.
In the following example, we have a global variable users
and that holds an array. In the input
element, we will enter some random text and upon click of a button, we will append it to the array. Please have a look over the code example and steps given below.
HTML & CSS
- We have 4 elements in the HTML file (
div
,button
,input
, andul
). Thediv
element is just a wrapper for the rest of the elements. - The inner text for the
button
element is“Add”
. - The
ul
element is empty for now since we will populate it dynamically using javascript. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div> <input type="text"> <button>Add</button> <ul></ul> </div> <script src="script.js"></script> </body> </html>
div { width: 20%; margin: auto; } input, button { padding: 10px; display: inline-block; } li { font-size: 20px; font-weight: bold; margin-left: -40px; list-style: none; }
Javascript
- We have a global variable
users
and it holds an array of strings. - We have the
addUsers()
method which is responsible for populating ourul
element. - In
addUsers()
method, we are simply looping through theusers
array and creating a template string with a bunch ofli
elements. - We are displaying that list in the
ul
element. - We have selected
button
andinput
elements using thedocument.querySelector()
method and stored them inbtnAdd
andinput
variables respectively. - We have attached the
click
event listener to thebutton
element. - In the event handler function, we are passing the value of the
input
element to thepush()
method so that we can append it to the array. - We are setting the value of the
input
element to an empty string and repopulating ourul
element by callingaddUsers()
method.
let users = ['Marks', 'James', 'Peter', 'Jane', 'Mary']; function addUsers(){ let template = users.map(user => `<li>${user}</li>`).join('\n'); document.querySelector('ul').innerHTML = template; } addUsers(); let btnAdd = document.querySelector('button'); let input = document.querySelector('input'); btnAdd.addEventListener('click', () =>{ users.push(input.value); input.value = ''; addUsers(); });