September 26, 2021

How to Get and Set Input Text Value in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get and set input text value in javascript. This is part of the basic skill set which every javascript developer should have. It is very common in a web project to read and write data in an input field using javascript.

The input element has a value property. This property can be used to read and write data in an input field. The one thing which you should always keep in mind is that whenever you read data from an input field, the type of that data will always be a string.

So if you want to perform any sort of calculation then you must convert it into a number type using the parseInt() or parseFloat() method.

In the following example, we have 2 input fields. Firstly, we will read the data from the first input field and display it on the screen. Secondly, we will read the data from the second input field and set it as a value in the first input field. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and input ). The div element with a class of container is just a wrapper for the rest of the elements.
We have 2 button elements with an innerText of “Get” and “Set”.
We have 2 input fields, one for reading data and another one for writing data.
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">
        <div>
            <input type="text" id="input-get" placeholder="Get Value">
            <button id="btn-get">GET</button>
        </div>
        <div id="result">
            Result
        </div>
        <div>
            <input type="text" id="input-set" placeholder="Set Value">
            <button id="btn-set">SET</button>
        </div>
    </div>

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

.container {
    display: flex;
    justify-content: space-evenly;
}

input, button {
    height: 25px;
}

#result {
    font-size: 25px;
    font-weight: bold;
}

Javascript

We have selected both the button elements, both the input elements, and a div element using the document.querySelector() method and stored them in btnGet, btnSet, inputGet, inputSet, and result variables respectively.
We have attached the click event listener to both the button elements.
In the event handler function of the get button, we are reading data from the first input field by using the value property of inputGet and setting it as innerText of the div element.
In the event handler function of the set button, we are reading data from the second input field by using the value property of inputSet and setting it as a value of the first input field.

let btnGet = document.querySelector('#btn-get');
let btnSet = document.querySelector('#btn-set');
let inputGet = document.querySelector('#input-get');
let inputSet = document.querySelector('#input-set');
let result = document.querySelector('#result');

btnGet.addEventListener('click', () =>{
    result.innerText = inputGet.value;
});

btnSet.addEventListener('click', () =>{
    inputGet.value = inputSet.value;
});

You May Also Like: