Jquery 按钮，该按钮应使div可见，但不起作用

在添加了允许用户在单击div外部时隐藏div的效果后，应该使我的div可见的按钮不起作用，下面是我的代码

脚本：

    <script>

     document.getElementById('button').onclick = function() {
        document.getElementById('login').style.visibility = 'visible';
    }
    document.getElementById('closelogin').onclick = function() {
        document.getElementById('login').style.visibility = 'hidden';
    }

    </script>

    <script>
    var notH = 1,
      $pop = $('#login').hover(function(){ notH^=1; });

    $(document).on('mouseup keyup', function( e ){
      if(notH||e.which==27) $pop.hide();
    });

    $(document).on('mouseup', function(){
      if(notH)$pop.hide();
    });

    if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

    </script>

    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

    <input type="button" id="button" value='Chat'/>

document.getElementById（'button'）。onclick=function（）{
document.getElementById（'login'）.style.visibility='visible'；
}
document.getElementById（'closelogin'）。onclick=function（）{
document.getElementById（'login'）.style.visibility='hidden'；
}
var NOH=1，
$pop=$（'#login'）.hover（function（）{notH^=1；}）；
$（文档）.on（'mouseup keyup'，函数（e）{
如果（notH | e.which==27）$pop.hide（）；
});
$（document）.on（'mouseup'，function（）{
if（notH）$pop.hide（）；
});
如果（$pop.is（'：visible'）&&（notH|e.which==27））$pop.hide（）；

Div:

    <script>

     document.getElementById('button').onclick = function() {
        document.getElementById('login').style.visibility = 'visible';
    }
    document.getElementById('closelogin').onclick = function() {
        document.getElementById('login').style.visibility = 'hidden';
    }

    </script>

    <script>
    var notH = 1,
      $pop = $('#login').hover(function(){ notH^=1; });

    $(document).on('mouseup keyup', function( e ){
      if(notH||e.which==27) $pop.hide();
    });

    $(document).on('mouseup', function(){
      if(notH)$pop.hide();
    });

    if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

    </script>

    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

    <input type="button" id="button" value='Chat'/>

关
选择一个用户名

去

按钮：

    <script>

     document.getElementById('button').onclick = function() {
        document.getElementById('login').style.visibility = 'visible';
    }
    document.getElementById('closelogin').onclick = function() {
        document.getElementById('login').style.visibility = 'hidden';
    }

    </script>

    <script>
    var notH = 1,
      $pop = $('#login').hover(function(){ notH^=1; });

    $(document).on('mouseup keyup', function( e ){
      if(notH||e.which==27) $pop.hide();
    });

    $(document).on('mouseup', function(){
      if(notH)$pop.hide();
    });

    if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

    </script>

    <div id="login" style="visibility:hidden">
    <button id="closelogin">Close</button>
    <input type="text" placeholder="Username"/>
    <p id="loginshiz">Pick a username</p>
    <button id="go">Go</button>
    </div>

    <input type="button" id="button" value='Chat'/>

---

我认为它与可见性有关：隐藏在div中？

用

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id.toLowerCase() === 'button') {
            $('#login').css('visibility', 'visible');
        }else if (e.target.id.toLowerCase() === 'closelogin') {
            $('#login').css('visibility', 'hidden');
        }else if ( !$(e.target).closest('#login').length ) {
            $('#login').css('visibility', 'hidden');
        }
    })
});

---

为此创建一个提琴。浏览器控制台中的任何错误都只是建议您尝试将代码包装进去，看起来您的脚本是在元素加载到dom之前执行的。。。在dom就绪处理程序中添加脚本