Computer >> Computer tutorials >  >> Programming >> Javascript

Make JavaScript take HTML input from user, parse and display?


The HTML input value is a string. To convert the string to integer, use parseInt().

Example

Following is the code −

<!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>
   <input type="text" id="txtInput" placeholder="Enter a number">
   <button type="button" onclick="result();">GetANumber</button>
</body>
<script>
   function result() {
      var numberValue = document.getElementById("txtInput").value;
      if (!isNaN(numberValue))
         console.log("The value=" + parseInt(numberValue));
      else
         console.log("Please enter the integer value..");
   }
</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 VS Code editor.

Output

This will produce the following output on console −

Make JavaScript take HTML input from user, parse and display?

Now, enter a value into the text box.

Make JavaScript take HTML input from user, parse and display?

Now press the button, you will get the following output.

This will produce the following output −

Make JavaScript take HTML input from user, parse and display?

The output in console −

Make JavaScript take HTML input from user, parse and display?