Быстрое добавление слушателей событий

У меня возникают трудности с добавлением слушателей событий к элементам в моих html-документах. Что мне не хватает?

Я всегда ошибаюсь.

Я хочу понять это и свободно использовать.

Например, мое новое испытание; это даже код из аналогичного вопроса, я только что изменил первое событие на «щелчок». когда я ничего не говорю об элементе, для которого добавлен слушатель, он работает, но при щелчках по всему телу.

Но я вижу следующие ошибки в Safari на моем Mac:

[Error] TypeError: 'null' is not an object (evaluating 'formslink.addEventListener')
    global code (entr1.html, line 21)

Код для этого ниже:

<html>
    <head>

    </head>
<script>
    function entranceForms()
    {
        var forms =  document.getElementById('entranceforms');

        if (forms.style.display === null || forms.style.display == 'none')
        {
            forms.style.display = 'block';
        }
        else
        {
            forms.style.display = 'none';

        }
    }
    var formslink=document.getElementById('formslink');
    formslink.addEventListener('click', entranceForms, false);
    var formscancel=document.getElementById('formscancel');
    formscancel.addEventListener('click', entranceForms, false);
    </script>

    <body>
    <p id="formslink">entrance</p>

    <DIV ID='entranceforms' STYLE='display: none; width: 100px; height:100px; border: 1px solid; position: absolute; top: 300px; left: 600px; z-index:1;
           background-color:white; opacity:1.0' >
            <P ID='formscancel'> Cancel </P> </DIV>


    </body>
    </html>

javascript addeventlistener
person sçuçu    schedule 16.03.2014    source источник
comment
Поместите <script> из <head> в (перед) тег <body>.   -  person Rahil Wazir    schedule 16.03.2014
comment
он все еще говорит то же самое.   -  person sçuçu    schedule 16.03.2014
comment
Вы пытаетесь получить доступ к элементам до того, как они существуют. Помещение вашего <script> элемента в качестве последнего дочернего элемента body должно исправить это; в противном случае превратите все это в функцию, которая запускается при возникновении события load (или DOMReady).   -  person CBroe    schedule 16.03.2014
comment
я не вижу ничего, чтобы отметить это решенным или вас как ответчика.   -  person sçuçu    schedule 16.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужен элемент для добавления метода.

http://plnkr.co/edit/pgCqxCQ8MGeiahymcCpg?p=info

var elem = document.getElementById('entrancelink');
elem.addEventListener('click', entranceForms, false);
person Chi Row    schedule 16.03.2014
comment
но он у меня был. хотя теперь он работает, помещая скрипт в качестве дочернего элемента тела в и всего html, как сказал @CBroe. - person sçuçu; 16.03.2014