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

Javascript Web Development Front End Technology Object Oriented Programming

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 −

Now, enter a value into the text box.

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

This will produce the following output −

The output in console −

AmitDiwan

Published on 09-Nov-2020 10:38:22

Previous Page Print Page