无法获取属性“addEventListener”[关闭]答案

【问题标题】：Unable to get property 'addEventListener' [closed]无法获取属性“addEventListener”[关闭]
【发布时间】：2014-08-07 13:24:31
【问题描述】：

我今天一直在处理我的应用程序的一个小方面，并希望在我的应用程序上添加一个滑动条。今天早上我问了一个问题，那里有一些很好的答案。我最近想尝试回答我使用 Script、CSS 和 HTML 给出的答案。

让 Script 工作时遇到问题，因为它不断出现错误提示：

 0x800a138f - JavaScript runtime error: Unable to get property 'addEventListener' of undefined or null reference

这是脚本：

<script type="text/javascript">

    var desktops = document.querySelectorAll('.desktop');

    function hide(element) {
        element.style.setProperty('left', '-100%', element.style.getPropertyPriority('left'));
    }

    function hideAll() {
        for (var i = 0; i < desktops.length; i++) {
            hide(desktops[i]);
        }
    }

    function show(element) {
        element.style.setProperty('left', '0', element.style.getPropertyPriority('left'));
    }

    document.getElementById('link-one').addEventListener('click', function () {
        hideAll();
        show(document.getElementById('one'));
    }, false);


    show(document.getElementById('one'));
</script>

这里是 HTML：

<ul>
<li id="link-one">
  <div>1</div>
  <div>One</div>
</li>
</ul>

<div id="one" class="desktop">
  <h1>Sidebar Example</h1>
  <p>This is 1</p>
  <p>Something here.</p>
</div>

据我所知是找不到身份证？

【问题讨论】：

你能举个小例子吗？消除与问题无关的一切。 sscce.org
@Kendall Frey 我会拿出 HTML，但脚本是问题所在。
HTML 很重要。不重要的是不需要重现问题的部分。我们只关心您的问题，所以请只向我们展示这一点，而不是额外的代码。
当您使用 ASP.NET 标记此内容时，您确定要查找正确的控件 ID？ ASP.NET（尤其是在使用 MasterPages 和/或 UserControls 时）通常会使用 ct100_mainContent_control 之类的名称呈现控件。
这就是问题所在，您无法在 HTML 元素被解析之前访问它们。尝试将脚本放在<body> 的底部，或使用onload 或类似的东西。

标签： javascript html asp.net

【解决方案1】：

问题是您在页面上的元素创建之前运行脚本。这就是getElementById 返回null 的原因。

有几种方法可以解决这个问题...

（由 Kendall 评论）您可以将脚本移动到 <body> 的末尾
您可以将代码放入一个函数中，然后从<body onload="newFunction();"> 调用该函数
如果你会使用jQuery，你可以将代码包装在$(function() { ... });中

【讨论】：

我已将它添加到我的身体底部，它工作正常。我很愚蠢，我没有想到逻辑，只是我总是在页面顶部添加脚本。
很高兴您可以使用它。如果你可以使用 jQuery，我会彻底推荐它。这将使您的生活变得更加轻松
我会四处看看如何让 jQuery 也能正常工作，但感谢您的回答 :)