Set the Value of an Input Field in JavaScript

Last Updated : 09 Jan, 2025

We will learn how you can set the value of an input field in JavaScript. We will set user input to the placeholder value of the input field using JavaScript.

Below are the approaches to set the value of an input field in JavaScript:

Table of Content

By using the innerHTML property
By using setAttribute Method

By using the innerHTML property

In this approach, we are going to call a function when the user clicks the button.
The click event will occur and a function will be invoked.
The function will get the input value from the input field and add that value using the “innerHTML” property provided by JavaScript.
At last, that value will be displayed on the screen.

Example: This example is the implementation of the above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Set the value of an input field.
    </title>
</head>

<body style="text-align:center;" id="body">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <input type='text' id='id1' />
    <br>
    <br>
    <button onclick="gfg_Run()">
        click to set
    </button>
    <p id="GFG_DOWN" style="color:green;
                            font-size: 20px;
                            font-weight: bold;">
    </p>
    <script>
        let el_down = document.getElementById("GFG_DOWN");
        let inputF = document.getElementById("id1");

        function gfg_Run() {
            inputF.value = "textValue";
            el_down.innerHTML =
                "Value = " + "'" + inputF.value + "'";
        }
    </script>
</body>

</html>

Output:

Set the value of an input field

By using setAttribute Method

In this approach, we are going to call a function when the user clicks the button.
The click event will occur and a function will be invoked.
The function will get the input value from the input field and set that value using the setAttribute() method.
And add that value using the “innerHTML” property provided by JavaScript.
At last, that value will be displayed on the screen.

Example: This example is the implementation of the above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Set the value of an input field.
    </title>
</head>

<body style="text-align:center;" id="body">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <input type='text' id='id1' />
    <br>
    <br>
    <button onclick="gfg_Run()">
        click to set
    </button>
    <p id="GFG_DOWN" style="color:green;
                            font-size: 20px;
                            font-weight: bold;">
    </p>
    <script>
        let el_down = document.getElementById("GFG_DOWN");
        let inputF = document.getElementById("id1");

        function gfg_Run() {
            inputF.setAttribute('value', 'defaultValue');
            el_down.innerHTML =
                "Value = " + "'" + inputF.value + "'";
        }
    </script>
</body>

</html>