Javascript 流畅地添加事件侦听器_Javascript_Addeventlistener

Javascript 流畅地添加事件侦听器

javascript

Javascript 流畅地添加事件侦听器,javascript,addeventlistener,Javascript,Addeventlistener,我很难将事件侦听器添加到html文档的元素中。我错过了什么我总是犯错误我想完全理解它并流利地使用它例如，我的新审判；这甚至是一个类似问题的代码，我刚刚将第一个事件更改为“单击”。当我没有说任何关于add-listener工作的元素时，我只说整个身体上的点击但我在mac上的Safari上看到以下错误： [Error] TypeError: 'null' is not an object (evaluating 'formslink.addEventListener') globa

我很难将事件侦听器添加到html文档的元素中。我错过了什么

我总是犯错误

我想完全理解它并流利地使用它

例如，我的新审判；这甚至是一个类似问题的代码，我刚刚将第一个事件更改为“单击”。当我没有说任何关于add-listener工作的元素时，我只说整个身体上的点击

但我在mac上的Safari上看到以下错误：

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


函数形式（）
{
var forms=document.getElementById（'enterForms'）；
if（forms.style.display==null | | forms.style.display==none）
{
forms.style.display='block'；
}
其他的
{
forms.style.display='none'；
}
}
var formslink=document.getElementById（'formslink'）；
formslink.addEventListener（'click'，enterForms，false）；
var formscancel=document.getElementById（'formscancel'）；
formscancel.addEventListener（'click'，enterForms，false）；
入口
取消

您需要一个元素来添加该方法

将

from

放到（before）

标记。它仍然在说同样的事情。您正在尝试在元素存在之前访问它们。把你的

元素作为

主体的最后一个子元素应该可以解决这个问题；否则，请将整个内容包装到一个函数中，该函数在发生load
（或DOMReady）事件时执行。我看不到任何东西可以将此问题标记为已解决或将您标记为应答者。但我确实找到了它。尽管它现在的工作原理是将脚本作为主体的子元素放在所有html的最前面，正如@CBroe所说的那样。
var elem = document.getElementById('entrancelink');
elem.addEventListener('click', entranceForms, false);