Question

我试图为我的网站制作一个简单的图片库。它是<ul>中的一堆图像，每个图像都是<li>元素。我有一个javascript onclick事件，它传递下一个图像编号，并将元素样式从显示块更改为显示无。它在Firefox等中完美运行，但在Safari中却没有。当画廊位于最后一张图像时，并且应该返回并显示第一张图像时，没有任何反应。最后一张图片只是消失了，我得到一个错误，上面写着：＆＃34; TypeError：null不是一个对象（评估＆＃39; document.getElementById（image）.style＆＃39;）＆＃34;

这是我的html（我删除了文件路径等，只是为了缩短它：

<ul id='img-container'>

<li id='1' class='first' style='display: block;'><a onclick='changeImage(2)'><img src='' /></a></li>

<li id='2' style='display: none;'><a onclick='changeImage(3)'><img src=''/></a></li>

<li id='3' style='display: none;'><a onclick='changeImage(4)'><img src='' /></a></li>

<li id='4' style='display: none;'><a onclick='changeImage(5)'><img src='' /></a></li>

<li id='5' style='display: none;'><a onclick='changeImage(6)'><img src=''/></a></li>

<li id='6' style='display: none;'><a onclick='changeImage(7)'><img src=''/></a></li>
</ul>

这是javascript：

    function countTotalImages(listName){
    var list = document.getElementById(listName);
    var numberOfImages = 0;
    var i = 0;
    while(list.getElementsByTagName('li') [i++]) numberOfImages++;
    return numberOfImages;
}

function changeImage(imageNumber) {
    var image = imageNumber;
    var totalImages = countTotalImages('img-container');
    var currentImage = image - 1;
    if (image > totalImages) {
        image = 1;
    }
    document.getElementById(currentImage).style.display='none';
    document.getElementById(image).style.display='block';

}

有趣的是，如果我改变变量＆＃34; totalImages＆＃34;在if语句到6中，这是列表中的图像总数，然后它在safari中工作。但我需要它是可变的，因为它并不总是与画廊中的图像数量相同。

任何帮助将不胜感激！谢谢！

XM

safari中的Javascript错误 - null不是对象

0 个答案: