Почему не обрабатывается событие?

Question

[Z Sh]

При нажатии на div с id authlink и текстом Sign In у блока с id authlayer должно поменяться css свойство с display=none на display=block. Но этого не происходит
HTML

<div id="authlink">Sign In</div>
        <div id="authlayer">
            <div class="login-form">
            <form method="post" action="" >
                <label for="login-field">Your Login:</label><br>
                <input type="text" name="login" id="login-field"><br>
                <label for="password-field">Your Password:</label><br>
                <input type="password" id="password-field" name="password" ><br>
                <input type="submit" value="Log In" >
            </form> 
            </div> 
        </div>

CSS

#authlayer{
    position: absolute;
    background: #cccc00;
    z-index: 1000;
    display: none;
    width: 100%;
    height: 100%;
}
.login-form{
    
    background: #ccc;
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    top: 32%;
    left: 40%;
    bottom: 42%;
    right: 40%;
    z-index: 1001;
    display: inherit;
}
.login-form input{
    border-radius: 10px;
    width: 100%;
    width: 100%;
}
.login-form input:focus{
    outline: none;
    border: 2px solid red;
}
.login-form input[type="submit"]{
    margin-top: 1.5em;
    font-weight: bold;
    margin-bottom: 0.3em;
}
#authlink{
    float: right;
    cursor: pointer;
    border-bottom: 1px solid steelblue;
    position: absolute;
    top: 10px;
    right: 25px;
    font-weight: bold;
    
}

JS

var authlink=document.getElementById('authlink');
authlink.onclick=function(){
    document.getElementById('authlayer').style.display='block';
};

Answer 1

[Константин Довнар]

Заодно проверьте, где вы добавляете скрипт. Возможно просто он происходит до того, как DOM-дерево уже создано, тогда и обработчик вешать некуда.
Если так, то можно либо перенести скрипт в конец документа, либо внести его в обработчик window.onload.

P.S. Жуть, как люди лезут повсюду с jQuery. :)

Comments

[Z Sh]

Спасибо, дело оказывается и в самом деле было в месте добавления скрипта.

Answer 2

[aumk]

$(function() {
     $("#authlink").click(function(){
          $(this).css("display","block");
     });
});

Comments

[Z Sh]

спасибо, но хотелось бы на чистом js

Answer 3

[Константин Китманов]

Проверьте, срабатывает ли код, который собственно навешивает обработчик.
Проверьте, срабатывает ли вообще навешанный обработчик.
Проверьте, находятся ли в DOM искомые элементы на момент навешивания и на момент срабатывания.

Все это можно сделать в любом современном браузере двумя кликами, поставив брейкпойнт.

Answer 4

[Сергей Протько]

document.addEventListener('ready', function () {
    document.querySeletor('#authlink').addEventListener('click', function () {
        this.style.display='block';
    }, true);
});