How to display value of textbox in JavaScript?

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

Extract the value from text box using value and can display in paragraph using innerHTML.

Example

Following is the code −

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   Enter your Name:
   <input type="text" placeholder="enter your name" id="txtInputData">
   <button onclick="displayName()">Click Me</button>
   <p id="show_name">
   </p>
</body>
<script>
   function displayName() {
      var originalName = document.getElementById("txtInputData").value;
      document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
   }
</script>
</html>

To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VSCode editor −

Output

This will produce the following output on console −

Now, enter the value into the text box and click the button −

After clicking the button, the output is as follows −

raja
Published on 09-Nov-2020 11:22:02
Advertisements