<!doctype html>
<html>
<head>
<title>JS Popup Boxes</title>
<style>
button {
background-color: #4535AA;
border: 0;
border-radius: 5px;
padding: 10px;
color: #FFF;
cursor: pointer;
}
#confirmBtn, #promptBtn {
display: none;
}
</style>
</head>
<body>
<button id="startBtn" onclick="start()">Start</button>
<button id="confirmBtn" onclick="sure()">Sure?</button>
<button id="promptBtn" onclick="welcome()">Your Name?</button>
<script>
function start() {
alert("Let's start the show...");
document.getElementById("confirmBtn").style.display = "block";
document.getElementById("startBtn").style.display = "none";
}
function sure() {
let result = ("Can we start?");
if(result)
{
document.getElementById("promptBtn").style.display = "block";
document.getElementById("confirmBtn").style.display = "none";
}
else {
document.getElementById("confirmBtn").style.display = "none";
document.getElementById("startBtn").style.display = "block";
}
}
function welcome() {
let name = ("What is your name?");
if(name !== null) {
document.write(`Welcome ${name} to Studytonight`);
}
else {
document.write("Oops! Cannot start without your name.");
}
startBtn.addEventListener('click', start);
confirmBtn.addEventListener('click', sure);
promptBtn.addEventListener('click', welcome);
}
</script>
</body>
</html>
