Before reading this code you should understand the HTML button and javascript function.
Display Welcome User using alert function in javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Javascriptr</title>
</head>
<body>
<div>
<h3>create a javascript program to print welcome user message on pressing a button</h3>
<button onclick="display()">Display</button>
</div>
<script>
function display()
{
alert("Welcome User");
}
</script>
</body>
</html>The output will look like this before pressing the button.
After pressing the button the output looks like this.
Using the innerHTML we will display the message on the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Javascript</title>
</head>
<body>
<div>
<h3>create a javascript program to print welcome user message on pressing a button</h3>
<button onclick="display()">Display</button>
<h1 id = "head"></h1>
</div>
<script>
function display()
{
const doc = document.getElementById("head");
doc.innerHTML = "Welcome User You Are Awesome";
}
</script>
</body>
</html>The output of the code is before pressing the button will look like this.
The output of the code after pressing the button will look like this
