JS: calling functions via buttons does not work anymore, if page is updated without reloading the pa-CodePudding

I want to write a program with one html page, which i can update and fill with different elements via javascript with one button that stays the same in every version, which displays a modalBox. I made a very basic version of this: One page, that is filled with two buttons (next and last) for navigating through the pages and one to display the modal. In addition, i added a number, which is incremented oder decremented accordingly, when you click through the updated versions of the page.

var counter = 1;

function setUp(){
    var c = document.getElementById("container");
    var d = document.createElement("div");
    d.setAttribute("id", "main");
    d.innerHTML = counter;

    var nxt = document.createElement("button");
    var bck = document.createElement("button");
    var modalBtn = document.createElement("button");

    nxt.innerText = ">";
    bck.innerText = "<";
    modalBtn.innerText="Show Modal";

    nxt.setAttribute("onclick","nextPage()");
    bck.setAttribute("onclick","lastPage()");
    modalBtn.setAttribute("onclick","showModal()");

    d.appendChild(bck);
    c.appendChild(d);
    d.appendChild(nxt);
    d.appendChild(modalBtn);
}
function showModal(){
    var m = document.getElementById("modal");
    m.style.display = "block";
}
function closeModal(){
    var m = document.getElementById("modal");
    m.style.display = "none";
}
function nextPage(){
    var c = document.getElementById("container");
    c.innerHTML="";
    counter  ;
    setUp();
}
function lastPage(){
    var c = document.getElementById("container");
    c.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>

The problem is: on onl oad, the modal button works fine (on click, the modal is displayed). As soon as i update (not reloading!) the page via the next- or back button, the modal button stops working (Error-message says the type of modalbutton is null). I have no clue why, because to my knowledge, the buttons are reinitiated by clicking on the next or back button (because the setUp()-function is called in the functions triggered by the buttons). As soon as I reload the page via the reload-button, it is working until i use one of the next and back buttons. I am new to js, it's probable that I'm missing sth. obvious here :) Many Thanks!

CodePudding user response：

On the "nextPage" and "lastPage" function , you're just removing the whole content (including the modal) from the div which associated container class. That's why when you calling the "showModal" function , there is no element with modal id on the DOM. That's why its saying null.

you can follow what Sakil said on the comment or, in your both(nextPage & lastPage) functions,you can just remove the div with id main and add it later on "setUp" function. I'm adding some code snippet below, hope it will help;

    function nextPage() {

        //grab the div with "main" id
        let main = document.getElementById("main");

        //remove it from document
        main.remove();

        counter  ;

        //add it again; what you're doing actually.
        setUp();
      }

   function lastPage() {
       
        //grab the div with "main" id
        let main = document.getElementById("main");

        //remove it from document
        main.remove();

        counter--;

        //add it again; what you're doing actually.
        setUp();
      }

of course you should refactor the code base, cause there is lot more copy-pasting staff present, but I'm leaving that up to you.

CodePudding user response：

The button that says Close has to be outside the container, because you, when I or somebody clicks next or previous (you call it last), you set the container's innerHTML to "", thus removing the close button on click of next or previous.

The solution is for the close button to be outside the container

for setUp not to be called on each next or previous click.