All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Set Input Value JavaScript

Last Updated : Sep 5, 2023

Set Input Value JavaScript

In this article we will show you the solution of set input value JavaScript, in JavaScript, we can use many different methods to set input values. Mostly used the following method to set values:

  • innerText
  • innerHTML
  • setAtrribute
  • Attribute
  • removeAttribute

In this tutorial, we will use the innerText and setAttribute methods and see examples of both.

By setting the value we can view the input values in our HTML page which is set by javascript.

Step By Step Guide On Set Input Value JavaScript :-

Method 1 - setAttribute() method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> set input value JavaScript </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> set input value javascript </h3>
    </center>
    <input type="text" name="" id="input"> <br>
    <button onclick="SetInputValue()"> Set Input Value </button>
    <script>
        function SetInputValue() {
            var input = document.getElementById('input') ;
            input.setAttribute("value", "New Input Value") ;
        }
    </script>
</body>
</html>
  1. To specify the version of HTML used by writing the HTML code <!DOCTYPE html>.
  2. Next, we must create the <html> element, which specifies the location of the HTML document's root. Add the </html> closing tag as well.
  3. The HTML file's metadata is contained in the <head> element, which is followed by the </head> tag.
  4. The HTML document's title is then specified using the <title> element, which is followed by the </title> tag.
  5. Use the <h1> element to add a heading and the </h1> tag to close it.
  6. we will use an external CSS file to style the html page
  7. using <style> tag to add CSS
  8. Now create a <input> tag with the type of text and id of input
  9. A <button> is created with e onclick function
  10. Create a <Script> tag to write JavaScript within it.
  11. Now here write the function mentioned in the button.
  12. Access the input tag by using document.getElementById().
  13. Now setAttribute tag used with the input tag to set the attribute value by New Input Value
  14. By clicking on the button we will able to see the value

Method 2 - innerText method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> set input value javascript </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> set input value javascript </h3>
    </center>
    <input type="text" name="" id="text" oninput="getValue()"> <br>
    <span id="result"></span>
    <script>
        function getValue() {
        let text = document.getElementById("text") ;
        let textValue = text.value;
        let result = document.getElementById("result") ;
        result.innerText = textValue ;
        }
    </script>
</body>
</html>
  1. To specify the version of HTML used by writing the HTML code <!DOCTYPE html>.
  2. Next, we must create the <html> element, which specifies the location of the HTML document's root. Add the </html> closing tag as well.
  3. The HTML file's metadata is contained in the <head> element, which is followed by the </head> tag.
  4. The HTML document's title is then specified using the <title> element, which is followed by the </title> tag.
  5. Use the <h1> element to add a heading and the </h1> tag to close it.
  6. we will use an external CSS file to style the html page
  7. using <style> tag to add CSS
  8. <h1> tag used to add a heading close it with </h1> tag
  9. <input> is created with the type of text, id of text, and oninput() of a function.
  10. A <span> id created with the id of result
  11. Create a <Script> tag to write JavaScript within it.
  12. Now in the function of getValue(), using let of text with the document.getElementById() of the input tag
  13. Getting the value using .value of entered text
  14. Accessing the span by its id with the document.getElementById()
  15. Put the value of input to the span by using .innerText

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know how to set input value in JavaScript.

I hope this article on set input value JavaScript helps you and the steps and method mentioned above are easy to follow and implement.