Question

代码用于滑块切换图像。当我运行页面时，我收到此错误：

无法将属性'onclick'设为null。

HTML：

   <!DOCTYPE html>
   <html lang="en">
   <head>
<meta charset="UTF-8">
<title>Image Slider</title>
<link rel="stylesheet" type="text/css" href="sliderswag.css">
<script language="javascript" type="text/javascript" src="imgslidescript.js"></script>
</head>
<body>
<div id="box">
    <img id="main" src="http://lmetar.com/oscar1.jpg">
    <img id="left" src="http://lmetar.com/left.png">
    <img id="right" src="http://lmetar.com/right.png">
</div>

JavaScript的：

 document.getElementById('left').onclick = slideChange;
document.getElementById('right').onclick = slideChange;
var slideNumber = 0;
function slideChange()
{
    slideNumber += 1;
    if (slideNumber > 3)
    {
        slideNumber = 1;
    }
    else
    {
        document.getElementById('main').src = 'http://lmetar.com/oscar' + slideNumber + '.jpg';
    }
}

Answer 1

将脚本移至页面末尾。您已经在尚不存在的元素上运行JavaScript。

或者将您拥有的代码包装在window.onload调用中，该调用将在窗口加载后执行代码。例如：

 window.onload = function () {
   document.getElementById('left').onclick = slideChange;
   document.getElementById('right').onclick = slideChange;
   var slideNumber = 0;

   function slideChange() {
     slideNumber += 1;
     if (slideNumber > 3) {
       slideNumber = 1;
     } else {
       document.getElementById('main').src = 'http://lmetar.com/oscar' + slideNumber + '.jpg';
     }
   }
 };

Answer 2

您的JavaScript在内容之前加载，因此它正在尝试查找不存在的元素。您有两个选择：

将您的<script>标记移至页面末尾
在执行脚本之前，请使用以下内容等待页面加载

代码：

document.addEventListener("DOMContentLoaded", function(event) { 
  // Your Code Here
});

document.getElementById因未知原因返回null

2 个答案: