<!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
>