How To Take Input From User In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of how to take input from user in JavaScript, an important aspect of computer science is creating interactive programs for users.
A large part of user interaction is allowing users to input information into a program.
In JavaScript, we use the prompt() function to ask the user for input. As a parameter, we input the text we want to display to the user. Once the user presses “ok,” the input value is returned.
We typically store user input in a variable so that we can use the information in our program.
You should have noted that prompt returns the user input as a string, but what if you want the user input to return a number instead of a string? The CodeHS JavaScript library includes the following commands:
- readLine(prompt): Reads a string value from a user
- readInt(prompt): Reads an integer value from a user
- readFloat(prompt): Reads a float value from a user
To ask for user input from the browser, you need to use the prompt() method provided by the browser.
User input can be received as a string and stored as a variable using the prompt() method
The JavaScript prompt box can be used to ask the user for input. With the prompt() method, you can show a prompt.
This method takes two arguments:
Message. The message that asks the user for the input.
Default input. The default input value before user types anything. This is an optional argument.
The prompt() method returns the user input as a string. If no input is specified, it returns a null.
To recap, you can ask user input with the built-in prompt() method. To store this input, assign the prompt into a variable.
A prompt() method must be used by the browser if you wish to require user input from it.
Step By Step Guide On How To Take Input From User In JavaScript :-
<!DOCTYPE html>
<html>
<head>
<title>User Input</title>
</head>
<body>
<button id="name">Name</button>
<button id="city">City</button>
<p>
Your Name is <span id="outputName">_</span>. TalkersCode The city in which you live is
</p>
<script>
document.getElementById("name").onclick = function(){
var name = prompt("Enter your full name");
document.getElementById("output").innerText = name;
}
document.getElementById("city").onclick = function(){
var city = prompt("Enter town");
document.getElementById("outputCity").innerText = city;
}
</script>
</body>
</html>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- Using the <head> tag, we will explain the project's heading. <title> are open and </title>.
- This is followed by the <body> tag that defines the body of the webpage.
- Then we use onclick directive for detecting click events and an ng-class directive for adding up and down arrows.
- Then we use <p> for creating paragraph.
- Then we added an HTML page with a <script> tag. The script tag explains the source code we used for the JavaScript google API run and the file we used that or the code.
- After that </script></body></html> and code should be executed after closing all tags.
Conclusion :-
In JavaScript, we use the prompt() function to ask the user for input. As a parameter, we input the text we want to display to the user. Once the user presses “ok,” the input value is returned.
We typically store user input in a variable so that we can use the information in our program.
I hope this article on how to take input from user in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
