<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Multiple script tag</title>
<style>
.common {
width: 200px;
height: 60px;
margin: 20px;
background-color: rgba(0, 0, 255, 1);
border-radius: 15px;
font-size: large;
color: white;
}
#btn1:hover {
background-color: royalblue;
}
#btn2:hover {
background-color: royalblue;
}
.createdDynamic {
display: block;
color: red;
font-size: larger;
width: 300px;
height: 100px;
margin-left: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<button id="btn1" class="common">Say Hello</button>
<div id="container"></div>
<script>
const btnEle = document.getElementById("btn1");
const container = document.getElementById("container");
// added an event listener on the btn1
// that will display the message
btnEle.addEventListener("click", function (e) {
// Here we are creating an element to
// put the text message on the web page
const createELe = document.createElement("span");
// giving class to created span
createELe.className = "createdDynamic";
// putting the content inside the span
createELe.textContent =
"Hello, This article is contributed for"+
"geeksforgeeks by Prince Kumar";
// appending span into the div element having id container
container.appendChild(createELe);
});
</script>
<button id="btn2" class="common">Remove</button>
<script>
const buttonEle = document.getElementById("btn2");
// added an event listener on btn2 that help us to remove
// the message from the span
buttonEle.addEventListener("click", function (e) {
alert("Do you really want to remove the message");
const getContainer = document.getElementById("container");
if (getContainer.textContent != "") {
getContainer.textContent = "";
}
});
</script>
</body>
</html>