无法获取属性'addEventListener'。

Question

无法获取属性'addEventListener'。

3

今天我在做我的应用程序的一个小方面，想在我的应用程序中添加一个滑动条。早上我问了一个问题，得到了一些很好的答案。最近，我想尝试使用脚本、CSS和HTML回答我所得到的那个答案。

但是我遇到了一个问题，就是无法让脚本正常工作，它经常出现错误提示：

 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代码：

以下是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>

据我所知，这可能是无法找到ID的原因？

- Ben Clarke

1

你能否提供一个更小的例子？消除与问题无关的所有内容。http://sscce.org - Kendall Frey

1

HTML很重要，但不重要的是它中的那些不必要的部分来重现问题。我们只关心你的问题，请只展示相关内容，不要添加额外的代码。 - Kendall Frey

由于您已经将此标记为ASP.NET，您确定您正在寻找正确的控件ID吗？ASP.NET（特别是在使用MasterPages和/或UserControls时）通常会使用名称（例如ct100_mainContent_control）呈现控件。 - freefaller

@KendallFrey 我已经再次编辑了这个问题。 - Ben Clarke

1

这就是问题所在，你不能在解析 HTML 元素之前访问它们。尝试将脚本放在 <body> 底部，或者使用 onload 或类似的东西。 - Kendall Frey

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- freefaller · Accepted Answer

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

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

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