JavaScript Program to Print Your Own Name

Last Updated : 17 Jan, 2025

We can print a user's name in JavaScript using methods like alert(), console.log(), document.write(),document.getElementById(). Each method serves a specific purpose depending on the output scenario.

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.

HTML

<!--Driver Code Starts{-->
<html>
<head>
</head>
<body>
<!--Driver Code Ends }-->

    <script>
        let userName = prompt("Method 1: Please enter your name:");
        alert("Your name is: " + userName);
    </script>

<!--Driver Code Starts{-->
</body>
</html>
<!--Driver Code Ends }-->

Prompt Input: The prompt() function is used to display a dialog box asking the user to input their name, which is then stored in the userName variable.
alert Output: The alert() function displays the entered name in a pop-up message, combining a string with the userName variable.
Dynamic Interaction: The code demonstrates dynamic interaction by accepting user input and immediately displaying it back, making it useful for simple inputs.

Output

JavaScript Program to Print Your Own Name

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.

HTML

<!--Driver Code Starts{-->
<html>
<head>
</head>
<body>
<!--Driver Code Ends }-->

    <script>
        let userName = prompt("Method 1: Please enter your name:");
        console.log("Your name is: " + userName);
    </script>

<!--Driver Code Starts{-->
</body>
</html>
<!--Driver Code Ends }-->

Prompt Input: The prompt() function is used to gather user input, displaying a dialog box where the user enters their name, which is stored in the userName variable.
Console Output: The console.log() method outputs the message "Your name is: " along with the user's input to the browser's developer console, making it visible for debugging purposes.
Non-Intrusive Logging: Unlike alert(), console.log() does not interrupt the user experience, making it a preferred choice for logging information during development.

Output

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.

HTML

<html>
<head></head>
<body>
    <div>
        This is div 1
    </div>
    <div>
        This is div 2
    </div>
    <script>
        let userName = prompt("Method 1: Please enter your name:");
        document.write("Your name is: " + userName);
    </script>
</body>
</html>

Prompt Input: The prompt() function collects the user's name via a dialog box, storing the input in the userName variable.
Dynamic HTML Update: The document.write() method dynamically writes the text "Your name is: " along with the user input directly into the HTML document.
Replaces Existing Content: When document.write() is executed after the page has fully loaded, it overwrites the entire existing content of the document.

Output

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.

HTML

<!--Driver Code Starts{-->
<html>
<head></head>
<body>
    <div id="output">
        This is div 1
    </div>
    <div>
        This is div 2
    </div>
<!--Driver Code Ends }-->

    <script>
        let userName = prompt("Method 1: Please enter your name:");
        document.getElementById("output").innerHTML = "Your name is: " + userName;
    </script>

<!--Driver Code Starts{-->
</body>
</html>
<!--Driver Code Ends }-->

Prompt Input: The prompt() function collects the user's name via a dialog box, storing the entered value in the userName variable.
Dynamic DOM Manipulation: The document.getElementById() method is used to locate the element with the id attribute of "output" in the DOM, allowing for dynamic updates to its content.
Non-Disruptive Update: Unlike document.write(), modifying the innerHTML property updates only the specified element's content without overwriting the entire document.

Output

JavaScript Program to Print the First Letter of Each Word

harshtondak

Improve

Article Tags :

JavaScript Program to Print Your Own Name

1. Using alert( )

2. Using console.log( )

3. Using document.write( )

4. Using document.getElementById( )

Similar Reads

Thank You!

What kind of Experience do you want to share?