Set Input Value JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
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>
- To specify the version of HTML used by writing the HTML code <!DOCTYPE html>.
- Next, we must create the <html> element, which specifies the location of the HTML document's root. Add the </html> closing tag as well.
- The HTML file's metadata is contained in the <head> element, which is followed by the </head> tag.
- The HTML document's title is then specified using the <title> element, which is followed by the </title> tag.
- Use the <h1> element to add a heading and the </h1> tag to close it.
- we will use an external CSS file to style the html page
- using <style> tag to add CSS
- Now create a <input> tag with the type of text and id of input
- A <button> is created with e onclick function
- Create a <Script> tag to write JavaScript within it.
- Now here write the function mentioned in the button.
- Access the input tag by using document.getElementById().
- Now setAttribute tag used with the input tag to set the attribute value by New Input Value
- 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>
- To specify the version of HTML used by writing the HTML code <!DOCTYPE html>.
- Next, we must create the <html> element, which specifies the location of the HTML document's root. Add the </html> closing tag as well.
- The HTML file's metadata is contained in the <head> element, which is followed by the </head> tag.
- The HTML document's title is then specified using the <title> element, which is followed by the </title> tag.
- Use the <h1> element to add a heading and the </h1> tag to close it.
- we will use an external CSS file to style the html page
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- <input> is created with the type of text, id of text, and oninput() of a function.
- A <span> id created with the id of result
- Create a <Script> tag to write JavaScript within it.
- Now in the function of getValue(), using let of text with the document.getElementById() of the input tag
- Getting the value using .value of entered text
- Accessing the span by its id with the document.getElementById()
- 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.
About Dikshita
