September 16, 2021

How to Create Button in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to create button in javascript. Dynamically creating a button element in javascript is not straightforward. For newbie developers, it can be a bit tricky since there is no built-in method just to create a button.

Having said that, we do have a document.createElement() method to create an element. Using this method, we can create any element of our choice. There is another method document.createTextNode() and that will create a node for text content. We can append this node as a child to the element returned by document.createElement() method to have some text content.

In the following example, we have a global array fruits and that includes a bunch of fruit names. We have one input field in which we will type those fruit names one by one. As soon as we are done typing a fruit name that is part of the array, we will dynamically create a submit button. Please have a look over the code example and steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and input). The div element with a class of container is just a wrapper for the input element.

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 class="container">
        <input type="text" placeholder="Enter Fruit Name">
    </div>

    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 70px;
}

input {
    height: 20px;
}

button {
    min-width: 120px;
}

Javascript

We have selected the input element and the div element using the document.querySelector() method and stored them in the input and container variables respectively.
We have a global variable fruits and it holds an array of fruit names.
We have attached keyup event listener to the input element.

In the event handler function, we are selecting the button element using document.querySelector() method and storing it in the btnSubmit variable. Since we do not have any button in our HTML file yet, document.querySelector() method will return null.
If there is a button element, we would like to remove it first and for that, we are using the removeChild() method of the div element.
We are checking if the text entered in the input element is part of the fruits array. I am getting the value of the input element from the event object using e.target.value, but you can also use input.value since we have already selected the input element in the beginning.

If text entered is part of the fruits array, then we will create a button element using document.createElement() method and store it in the local variable btnSubmit.
We will create a text node using document.createTextNode() method and store it in the btnText variable.
We will append the text node to the button element using the appendChild() method.

We have to display this button element on the screen, so we have to append it to any of the existing elements. We are appending it to the div element using the appendChild() method.

let input = document.querySelector('input');
let container = document.querySelector('.container');

let fruits = ['Apple', 'Orange', 'Kiwi', 'Grapes', 'Mango'];

input.addEventListener('keyup', (e) =>{

    let btnSubmit = document.querySelector('button');

    if(btnSubmit){
        container.removeChild(btnSubmit);
    }


    if(fruits.includes(e.target.value)){
        let btnSubmit = document.createElement('button');
        let btnText = document.createTextNode('Submit');
        
        btnSubmit.appendChild(btnText);
        container.appendChild(btnSubmit);
    }
});

You May Also Like: