JavaScript 运行时错误：无法获取未定义或空引用的属性“类名”答案

【问题标题】：JavaScript runtime error: Unable to get property 'className' of undefined or null referenceJavaScript 运行时错误：无法获取未定义或空引用的属性“类名”
【发布时间】：2014-07-14 00:23:17
【问题描述】：

我正在尝试将图像滑块编码到我的网站中，但每当我尝试调试时都会收到此错误：

JavaScript 运行时错误：无法获取属性 'className' 未定义或空引用

当我使用 chrome 检查元素时，它显示了 project# div 标签的 className 属性的空引用，但我在 html 代码中为每个标签定义了类。我很迷茫，我不明白是什么导致了检测错误。您的帮助将不胜感激。所有相关代码如下。谢谢你:)

HTML：

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tebello | Projects</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
    <script src="script.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" />
    <link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<div id="slider">
    <div id="wrapper">
        <!--start slide 1 -->
        <div class="content" id="project1">
            <img src="images/NumScram.png" />
            <div class="text">
                <h3>Project name</h3>
                <p>A short description of the project</p>
            </div>
        </div> 
        <!-- end slide1 -->

        <!--start slide 2 -->
        <div class="content" id="project2">
            <img src="images/WebCalc.png" />
            <div class="text">
                <h3>Project name</h3>
                <p>A short description of the project</p>
            </div>
        </div> 
        <!--end slide2 -->

        <!--start slide 3 -->
        <div class="content" id="project3">
            <div class="text">
                <h3>Project name</h3>
                <p>A short description of the project</p>
            </div>
        </div> 
         <!--end slide3 -->
    </div>
    <!--end wrapper-->
</div>
<!--end slider-->

<!--Start navlinks-->
<div id="navlinks">
    <ul>
        <li class="itemlinks" data-pos="0px">1</li>
        <li class="itemlinks" data-pos="-823px">2</li>
        <li class="itemlinks" data-pos="-1646px">3</li>
        <li class="itemlinks" data-pos="-2469px"></li>
    </ul>
</div>
<!--end navlinks-->

Javascript：

var links = document.querySelectorAll(".itemlinks");
var wrapper = document.querySelector("#wrapper");

for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setPosition, false);
}

addClass(links[0], "active");

function setPosition(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    addClass(clickedLink, "active");

    var position = clickedLink.getAttribute("data-pos");
    wrapper.style.left = position;
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        removeClass(links[i], "active");
    }
}

function addClass(element, classToAdd) {
    var currentClassValue = element.className;

    if (currentClassValue.indexOf(classToAdd) == -1) {
        if ((currentClassValue == null) || (currentClassValue === "")) {
            element.className = classToAdd;
        } else {
            element.className += " " + classToAdd;
        }
    }
}

function removeClass(element, classToRemove) {
    var currentClassValue = element.className;

    // removing a class value when there is more than one class value present
    // and the class you want to remove is not the first one
    if (currentClassValue.indexOf(" " + classToRemove) != -1) {
        element.className = element.className.replace(" " + classToRemove, "");
        return;
    }

    // removing the first class value when there is more than one class
    // value present
    if (currentClassValue.indexOf(classToRemove + " ") != -1) {
        element.className = element.className.replace(classToRemove + " ", "");
        return;
    }

    // removing the first class value when there is only one class value 
    // present
    if (currentClassValue.indexOf(classToRemove) != -1) {
        element.className = element.className.replace(classToRemove, "");
        return;
    }
}

【问题讨论】：

很可能在脚本执行时您的元素不存在，除非您在文档就绪时添加事件，或在结束正文标记之前加载脚本。
它与 className 无关，它与您尝试引用的元素不存在有关。
在head而不是body中包含你的javascript是一个非常基本的错误。

标签： javascript html slider

【解决方案1】：

我猜问题出在您添加script.js 文件的位置。您正在尝试将您的 javascript 代码包含在 head 标记中。因此，javascript 代码在 DOM 呈现之前执行，并且您要添加 class 的元素尚不存在。

在</body> 之前添加脚本。

<html>
<head>
...more html...
</head>
<body>
...more html...
...more html...

<script src="script.js"></script>
</body>
</html>

我对代码进行了更正测试，它可以正常工作。希望对你有帮助。

注意：您共享的代码 sn-p 中缺少body 标签。我假设它存在于实际代码中。

【讨论】：

正文标签是可选的，因此“缺少”很好，在实际代码中不需要。

【解决方案2】：

如果您的 JavaScript 在完整页面加载之前执行，那就是您的 document.querySelectorAll(".itemlinks"); 代码以零长度返回 links。解决您在加载时使用 JavaScript 代码的问题。（请参考以下代码）

 window.onload = function(){
        var links = document.querySelectorAll(".itemlinks");
        var wrapper = document.querySelector("#wrapper");

        for (var i = 0; i < links.length; i++) {
            var link = links[i];
            link.addEventListener('click', setPosition, false);
        }

        addClass(links[0], "active");

        function setPosition(e) {
            removeActiveLinks();

            var clickedLink = e.target;
            addClass(clickedLink, "active");

            var position = clickedLink.getAttribute("data-pos");
            wrapper.style.left = position;
        }

        function removeActiveLinks() {
            for (var i = 0; i < links.length; i++) {
                removeClass(links[i], "active");
            }
        }

        function addClass(element, classToAdd) {
            var currentClassValue = element.className;

            if (currentClassValue.indexOf(classToAdd) == -1) {
                if ((currentClassValue == null) || (currentClassValue === "")) {
                    element.className = classToAdd;
                } else {
                    element.className += " " + classToAdd;
                }
            }
        }

        function removeClass(element, classToRemove) {
            var currentClassValue = element.className;

            // removing a class value when there is more than one class value present
            // and the class you want to remove is not the first one
            if (currentClassValue.indexOf(" " + classToRemove) != -1) {
                element.className = element.className.replace(" " + classToRemove, "");
                return;
            }

            // removing the first class value when there is more than one class
            // value present
            if (currentClassValue.indexOf(classToRemove + " ") != -1) {
                element.className = element.className.replace(classToRemove + " ", "");
                return;
            }

            // removing the first class value when there is only one class value
            // present
            if (currentClassValue.indexOf(classToRemove) != -1) {
                element.className = element.className.replace(classToRemove, "");
                return;
            }
        }
    }

如果此代码运行良好，请投票。

【讨论】：