JavaScript 运行时错误：无法获取未定义或空引用的属性“className”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24728118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript runtime error: Unable to get property 'className' of undefined or null reference
提问by Tebello Tibi Khesa
I'm trying to code an image slider into my website but I'm receiving this error whenever I try to debug:
我正在尝试将图像滑块编码到我的网站中，但是每当我尝试调试时都会收到此错误：
JavaScript runtime error: Unable to get property 'className' of undefined or null reference
JavaScript 运行时错误：无法获取未定义或空引用的属性“className”
When I use chrome to inspect the elements, it shows a null reference for the className property of the project# div tags, yet I defined the class for each of these tags in the html code. I'm so lost, I don't understand what's causing the detection error. Your help will be much appreciated. All the relevant code is below. Thank you :)
当我使用 chrome 检查元素时，它显示了 project# div 标签的 className 属性的空引用，但我在 html 代码中为每个标签定义了类。我很迷茫，我不明白是什么导致了检测错误。您的帮助将不胜感激。所有相关代码如下。谢谢 ：）
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:
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;
}
}
回答by kushdilip
I guess the problem is with place where you added your script.jsfile.
You are trying to include your javascript code in headtag. So the javascript code execute before the DOM has rendered and the element to which you are adding the classdoesn't exists yet.
我想问题在于您添加script.js文件的位置。您正试图在head标签中包含您的 javascript 代码。因此 javascript 代码在 DOM 呈现之前执行，并且您要添加的元素class尚不存在。
Include the script right before </body>.
在</body>.
<html>
<head>
...more html...
</head>
<body>
...more html...
...more html...
<script src="script.js"></script>
</body>
</html>
I tested the code with correction and it works. I hope it helps.
我通过更正测试了代码并且它有效。我希望它有帮助。
Note: bodytag is missing in code snippet you shared. I am assuming that is present in actual code.
注意：body您共享的代码片段中缺少标记。我假设它存在于实际代码中。
回答by Durgaprasad Budhwani
In you case your JavaScript is executing before complete page loads and that's you your document.querySelectorAll(".itemlinks");code is returning linkswith zero length.
Solution to your question to use JavaScript code on load. (Please refer below code)
在您的情况下，您的 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;
}
}
}
Please up vote it if this code works fine.
如果此代码工作正常，请投票。
