javascript - Javascript で表示される HTML ボタンが機能しない

Question

ウィンドウの可視性に応じて、呼び出されたときにポップアップ ウィンドウを表示または非表示にする JavaScript 関数があります。この関数の以前のバージョンはうまく機能しました。つまり、閉じるボタンを押すとウィンドウが消えてしまいます。ただし、関数にコードを追加したため、閉じるボタンが機能しなくなりました。以下は、関数の以前のバージョンと現在のバージョン、それが操作する「オーバーレイ」div、および div の CSS です。どんな助けでも大歓迎です。どの変更が問題の原因であるか、またどのように修正するかがわかりません。

以前の (作業中の) 関数:

<script>
function overlay(descrip, name) {
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br><input type='button' onclick='overlay()' value='Close'></input></div>";
    var el = document.getElementById("overlay");
    el.innerHTML = descripBox;
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

現在の (動作していない) 関数:

<script>
function overlay(descrip, name, req) {
    if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
    }
    else
        var reqHtml = '';
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
        reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
    var el = document.getElementById("overlay");
    el.innerHTML = descripBox;
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

オーバーレイ div:

<div id="overlay">
     <div>
          </br>
          <input type="button" onclick="overlay()" value="Close"></input>
     </div>
</div>

CSS:

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 500px;        
     width:100%;
     height:100%;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #ebebeb;
     border:2px solid #c7c7c7;
     padding:15px;   
}