JavaScript Program to Print Your Own Name
Last Updated :
19 Feb, 2024
We will learn how to use JavaScript methods to display your name.
There are several ways in which we can print the name of a user such as the alert( ) method, console.log( ) method, and document.write( ) method and document.getElementById( ) method. Each of these methods serves different purposes and can be used in different scenarios.
These are the following approaches:
Approach 1: Using alert( )
This method is used when you want to show the output in the form of a pop-up. This is useful for creating a direct communication channel with users. It is also effective in providing immediate information or feedback.
Example: Below is an example of using alert( ) to show the name of the user.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Printing User Name</title>
</head>
<body>
<script>
// We are using PROMPT to get
// the name from the user
let userName =
prompt("Method 1: Please enter your name:");
// Using alert to display a pop-up
// message with the entered name
alert("Your name is: " + userName);
</script>
</body>
</html>
|
Output:
alert( )
Approach 2: Using console.log( )
This method is used when you want to output the information to the browser console for debugging or logging. This method is mainly used by developers to track variables and outputs in a program.
Example: Below is an example of using console.log( ) to show the name of the user.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Printing User Name</title>
</head>
<body>
<script>
// We are using PROMPT to get
// the name from the user
let userName =
prompt("Method 1: Please enter your name:");
// Using console.log to print the
// entered name to the console
console.log("Your name is: " + userName);
</script>
</body>
</html>
|
Output:
console.log( )
Approach 3: Using document.write( )
This method is used when you want to directly write some content to the HTML document. This method is useful when you want to dynamically update the webpage’s display without any additional manipulation.
Example: Below is an example of using document.write( ) to show the name of the user.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Printing User Name</title>
</head>
<body>
<div>
This is div 1
</div>
<div>
This is div 2
</div>
<script>
// We are using PROMPT to get
// the name from the user
let userName =
prompt("Method 1: Please enter your name:");
// Using document.write to display
// the entered name in the HTML document
document.write("Your name is: " + userName);
</script>
</body>
</html>
|
Output:
document.write( )
Approach 4: Using document.getElementById( )
This method is used when you want to update the content of an HTML element with a specific ID. This method is useful when you want to update some specific sections of a webpage.
Example: Below is an example of using document.getElementById( ) to show the name of the user.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Printing User Name</title>
</head>
<body>
<div id="output">
This is div 1
</div>
<div>
This is div 2
</div>
<script>
// We are using PROMPT to get
// the name from the user
let userName =
prompt("Method 1: Please enter your name:");
// Using document.getElementById
// to update an element
// in the HTML document with the entered name
document.getElementById("output").
innerHTML = "Your name is: " + userName;
</script>
</body>
</html>
|
Output:
document.getElementById( )
Share your thoughts in the comments
Please Login to comment...