页面无刷新更新后Modal按钮点击失效问题求助

我开发了一个单HTML页面，通过JavaScript动态更新元素，包含切换页面的“上一页”“下一页”按钮、显示Modal的按钮，以及随页面切换增减的计数数字。页面加载完成时Modal按钮正常，但点击“上一页”或“下一页”后，Modal按钮失效，控制台报错modal is null，刷新页面后恢复正常。

现有代码 #

HTML

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

CSS

*{
    padding: 0;
    margin: 0;
}
#modal{
    position: absolute;
    width: 500px;
    height: 300px;
    background-color: black;
    display: none;

}
#main{
    background-color: aliceblue;
    height: 500px;
    width: 800px;
}

JavaScript

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();

问题原因 #

核心问题出在nextPage()和lastPage()函数里的c.innerHTML=""：这行代码会清空#container内的所有元素，包括原本放在里面的#modal。切换页面后，DOM中已经没有#modal元素了，所以showModal()里document.getElementById("modal")会返回null，自然无法修改它的显示状态。

解决方案 #

有两种简单的修复方式，选其一即可：

方案1：将Modal移出Container

把#modal从#container里挪出来，这样切换页面时清空#container就不会影响到Modal：
修改后的HTML：

<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>
   <div id="modal"><button id="closeButton" onclick="closeModal()">Close</button></div>
</body>
</html>

方案2：只清空动态生成的内容，保留Modal

不直接清空整个#container，而是只删除动态生成的#main元素：
修改后的JavaScript的nextPage()和lastPage()：

function nextPage(){
    var main = document.getElementById("main");
    if(main) main.remove();
    counter++;
    setUp();
}
function lastPage(){
    var main = document.getElementById("main");
    if(main) main.remove();
    counter--;
    setUp();
}

这两种方式都能保证切换页面后#modal始终存在于DOM中，Modal按钮就能正常工作了。

内容的提问来源于stack exchange，提问作者Aljoscha Labonte