Question

我今天一直在处理我的应用程序的一个小方面，并希望在我的应用程序上获得一个滑动条。今天早上我问了一个问题，那里有一些很好的答案。我最近想尝试回答我使用脚本， 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 ：

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

Answer 1

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

的原因

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

（由Kendall评论）您可以将脚本移至<body>
您可以将代码放入函数中，然后从<body onload="newFunction();">
如果您可以使用jQuery，则可以将代码包装在$(function() { ... });

无法获取属性'addEventListener'

1 个答案: