How To Take Input In JavaScript From User
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of how to take input in JavaScript from user, creating interactive programs for users is an important component of computer science.
Allowing users to submit data into a program is a big aspect of user interaction. The capacity to read, process, and output user data are required when working with any dynamic language.
JavaScript is very useful for processing user data without requiring it to be sent back to the server.
Sending everything to the server is substantially slower than using JavaScript for processing, but you must be able to receive user input and process it properly.
This article will concentrate on gathering user input and showing it on the screen via HTML elements or prompts.
Step By Step Guide On How To Take Input In JavaScript From User :-
The prompt() method displays a dialogue box with an optional message asking the user to fill in certain information. When a user wants to enter a value before moving on to the next page, it's commonly used.
Either a string containing the user's content or null is returned.
In JavaScript, the prompt() method is used to solicit input from the user. As a parameter, we pass the text we want to show the user.
The input value is returned after the user presses "ok." User input is usually saved in a variable so that we can use it later in our application.
<html>
<head>
<title></title>
</head>
<body>
<h1 id="welcome"> Hello! </h1>
<script>
var nickname = prompt("Enter your name: ");
if (nickname != null) {
document.getElementById("welcome").innerText =
"Hello, " + nickname + "!";
}
</script>
</body>
</html>
- To begin, type <! DOCTYPE html> to indicate that the file is in HTML format to the web browser.
- The < html> element, on the other hand, is used to indicate that HTML content is about to begin.
- The information about web pages is now contained in the <head> tag. This tag uses the < title> element to provide a web page title. The <head> and < title> tags, for example, are paired tags. As a result, both have the closing tags </head> and </title>.
- Finally, the <body> element specifies the web page's content. This is where all of the stuff for the website will be written. To include our javascript code, we used the script tag inside the body element. The h1 HTML tag with the id "welcome" is the element we're using. The JavaScript prompt requests the user's name, which is subsequently displayed in the "welcome" h1.
- The prompt method is used in the first line of code. What you want to display to the user is the first parameter in the prompt. Because we want the user to enter a name in this case, the prompt reads "Enter your name."
- Take note of the "if" statement, which determines whether the "customerName" variable is null. This logic verifies that the user has entered something.
- The code within the "if" line then displays the message to the user in the "welcome" h1 tag.
- Finally, the < /body> and </html> tags are used to close the body and html tags, respectively.
Conclusion :-
In today's lesson, you learned how to use JavaScript to request user input. To summarise, you can utilize the built-in prompt() method to request user input.
This brings up a prompt box where the user can type in the text. Assign the prompt to a variable to save this information. I hope this tutorial on how to take input in JavaScript from user helps you.
About Dikshita
