I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a modal box when clicked. My initial implementation includes a simple setup with two navigation buttons (next and last) for moving through the pages, as well as a button to trigger the modal display. Additionally, there is a counter that increments or decrements based on the page version.
var counter = 1;
function setUp(){
var container = document.getElementById("container");
var mainDiv = document.createElement("div");
mainDiv.setAttribute("id", "main");
mainDiv.innerHTML = counter;
var nextBtn = document.createElement("button");
var backBtn = document.createElement("button");
var modalBtn = document.createElement("button");
nextBtn.innerText = ">";
backBtn.innerText = "<";
modalBtn.innerText = "Show Modal";
nextBtn.setAttribute("onclick", "nextPage()");
backBtn.setAttribute("onclick", "lastPage()");
modalBtn.setAttribute("onclick", "showModal()");
mainDiv.appendChild(backBtn);
container.appendChild(mainDiv);
mainDiv.appendChild(nextBtn);
mainDiv.appendChild(modalBtn);
}
function showModal(){
var modal = document.getElementById("modal");
modal.style.display = "block";
}
function closeModal(){
var modal = document.getElementById("modal");
modal.style.display = "none";
}
function nextPage(){
var container = document.getElementById("container");
container.innerHTML = "";
counter++;
setUp();
}
function lastPage(){
var container = document.getElementById("container");
container.innerHTML = "";
counter--;
setUp();
}
setUp();*{
padding: 0;
margin: 0;
}
#modal{
position: absolute;
width: 500px;
height: 300px;
background-color: black;
display: none;
}
#main{
background-color: aliceblue;
height: 500px;
width: 800px;
}<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">
<link rel="stylesheet" href="tryout.css">
<script src="tryout.js" defer></script>
<title>Document</title>
</head>
<body>
<div id="container">
<div id="modal"><button id="closeButton" onclick="closeModal()">Close</button></div>
</div>
</body>
</html>