可以'；t将属性src设置为null，即使DOM已准备就绪 - Can't set property src of a null even though DOM is ready

所以基本上我有这个表，里面有六个图像，作为一个不错的图像库。在底部的导航栏上，我有一个javascript函数，当用户单击时，它应该使用一组图像文件源来更改表中图像元素的各个标签。所有的javascript都应该在DOM准备就绪时执行。问题是，当我试图点击底部的导航栏时，我会得到"无法设置null的src值"，这让我觉得数组工作不正常，或者它没有按照预期的方式调用元素。

这是创建表、提取图像并在DOM准备好时将其粘贴到javascript数组中的PHP脚本。我私下怀疑，问题的一部分是，除非在应该创建javascript数组的部分后面包含两个</script>，否则代码不会执行。

<?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>';
?>

这是HTML代码

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Perspective by Daniel Streich</title>
    <link rel="stylesheet" type="text/css" href="scripts/css.css">
    <link href="css/lightbox.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
    <script>
        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;
            }
        }
    </script>
    <?php
    $active = "Art";
    include ('menu.php');
    ?>
    <div class="wrapperRegular">
        <p class="bigTitle">
            Perspective by Daniel
        </p>
        <p class='actualText'>
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
        </p>
        <?php
        include ('gallery.php');
        ?>
        <br>
        <div id="footer">
            Copyright &#169; Perspective by Daniel
        </div>
    </div>
</body>

如果有人能弄清楚这一点，我将非常感激，因为我一辈子都无法得到它

用以下内容替换<script>内容：

$( 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;
            }
        }
});

使用jQuery处理点击的示例：echo'⇒；'；成为：echo'⇒；'；

在JQuery脚本中，您只需执行以下操作：

$( 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;
            }
        }
});

希望对有所帮助