Javascript code to display a welcome message after accepting the name of the user using a prompt box

Hello there,


In this article you will learn how can you let the user input something when the website loads and the site will display that input on the screen.
We are going to use JavaScript Prompt to take the input from the user.


Prerequisites

Very basic knowledge of JavaScript



So, let's start the coding part...


HTML

Firstly create a html file. I've created a basic template with heading tag just to display the information. You can modify your html according to that.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        Hello
        <div id="name">User</div>
    </h1>
</body>
</html>

Just give a id to the element whose content you have to change.

Here, I have to change the content inside the div with id "name".


So, we are all set. Now let's jump to the main JS part...

It's just a two line script and you're done.


JS

<script>
    const name = prompt("Enter your name");
    document.getElementById("name").innerText = name;
</script>

What we are doing here is taking a prompt input from the user and storing it in the variable called "name".

Then we're changing the content of the div with id "name".


So, that's it for this post. This was a small basic tutorial on JavaScript. Have a look on my other JavaScript projects by clicking the button below.

0 Comments