Javascript Can'；即使DOM已准备就绪，也不能设置null的属性src

所以基本上我有一张桌子，里面有六张图片，这是一个很好的图片库。在底部的导航栏上，我有一个javascript函数，当用户单击时，该函数应该使用一个图像文件源数组来更改表中图像元素的单个标记。所有javascript都应该在DOM就绪时执行。问题是，当我试图点击底部的导航栏时，我得到了“不能设置空值的src值”，这让我觉得数组工作不正常，或者它没有按预期的方式调用元素

这是创建表、提取图像并在DOM就绪时将其粘贴到javascript数组中的PHP脚本，我暗自怀疑问题的一部分是，除非在创建javascript数组的部分后面包含两个

，否则代码不会执行

<?php

$directory = 'images/gallery/';
$files1 = scandir($directory);
$length = count($files1);
echo "<script $( document ).ready(function() {";
$y = 2;
for ($x = 0; $x < $length-2; $x++) {
echo "images[$x] = 'Images/gallery/$files1[$y]';";
$y= $y + 1;
}
echo "});";
echo"</script>";
echo"</script>";
echo "<table><tr>";
for ($i = 2; $i <= 7; $i++) {
if ($i == 5) {
    echo "</tr><tr>";
}
echo "<td class='galleryImageWrapper'><a href='images/gallery/$files1[$i]' data-lightbox='Gallery'><img id='$i' src='images/gallery/$files1[$i]'></a></td>";
}
echo "</tr></table>";
echo "<div id='galleryNavWrapper'><div onclick='advanceLeft()' id='leftbutton'>&#8656;  </div><ul id='galleryNav'>";
for ($i = 1; $i <= ($length / 6); $i++) {
echo "<li onclick='galleryNavButton(this.value)'>$i</li>";
}
echo '</ul><div id="rightButton" onclick = "advanceRight()">&#8658;</div>';
?>

将您的
内容替换为以下内容：

$( document ).ready(function() {
 var i = 0;
        var images = new Array();
        /*
         $( document ).ready(function() {
         document.write("well this be working");
         });*/
        function advanceLeft() {

            if (i == 0) {
                return false;
            } else {
                i = i - 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function advanceRight() {
            if (i == images.length - 1) {
                return false;
            } else {
                i = i + 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function galleryNavButton(newId) {
            i = i - ((i - newId) * 6);
            for (var x = i; i <= 5; x++) {
                document.getElementById(x).src = images[x];
                return true;
            }

        }
});

$（文档）.ready（函数（）{
var i=0；
var images=新数组（）；
/*
$（文档）.ready（函数（）{
记录。写下（“这很有效”）；
});*/
函数advanceLeft（）{
如果（i==0）{
返回false；
}否则{
i=i-6；
对于（var x=i；x数值ID，糟糕的主意。当
i
的值不起作用时，为什么不调试它呢？在这一点上应该很明显。另外，
我使用数值ID时有一个非常严重的语法错误，因为它们是通过php脚本生成的，我不喜欢使用它们，但我找不到更好的方法它。你建议我如何调试它？我试着放了几个文档。在文档中写入（I），但什么都没有发生。我的回答中添加了JQuery示例。我试过了，现在它说我所有的函数都没有定义。我不确定你为什么不这样做（“#someidforclickfield”）。单击（function（）{advanceRight（））
而不是使用一堆onclick。如果你愿意，我可以更新答案，告诉你那会是什么样子。我一开始尝试过这样做，但我完全破坏了语法，我的一个朋友说，我最好这样做，如果你能告诉我那会很好。我在那里为y添加了一个示例click方法ou（编辑了我现有的答案）。希望能有所帮助。我也添加了一条评论。如果有效，请告诉我。
$( document ).ready(function() {
 var i = 0;
        var images = new Array();
        /*
         $( document ).ready(function() {
         document.write("well this be working");
         });*/
        function advanceLeft() {

            if (i == 0) {
                return false;
            } else {
                i = i - 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function advanceRight() {
            if (i == images.length - 1) {
                return false;
            } else {
                i = i + 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function galleryNavButton(newId) {
            i = i - ((i - newId) * 6);
            for (var x = i; i <= 5; x++) {
                document.getElementById(x).src = images[x];
                return true;
            }

        }
});

$( document ).ready(function() {
        var i = 0;
        var images = new Array();
        /* This is how you would handle the click */
        $('#rightButton').click(function(){
            advanceRight();
        });
        function advanceLeft() {

            if (i == 0) {
                return false;
            } else {
                i = i - 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function advanceRight() {
            if (i == images.length - 1) {
                return false;
            } else {
                i = i + 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function galleryNavButton(newId) {
            i = i - ((i - newId) * 6);
            for (var x = i; i <= 5; x++) {
                document.getElementById(x).src = images[x];
                return true;
            }

        }
});