September 14, 2021

How to Append Value to an Array from Input Text in Javascript

By Krishnaa JavaScript Questions 0 Comments

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, and ul). The div 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 the head element.

We have also included our javascript file script.js with a script 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 our ul element.
In addUsers() method, we are simply looping through the users array and creating a template string with a bunch of li elements.
We are displaying that list in the ul element.

We have selected button and input elements using the document.querySelector() method and stored them in btnAdd and input variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are passing the value of the input element to the push() 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 our ul element by calling addUsers() 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();        
});

You May Also Like: