完全的初学者,无法让 Javascript“简单的照片库”教程工作

Total beginner, can't get Javascript 'simple photogallery' tutorial to work

提问人:SacajaweaX 提问时间:11/15/2023 更新时间:11/15/2023 访问量:50

问:

我刚刚开始我的 JavaScript 生活,我已经按照 Home and Learn UK 网站上的这个简单的 Javascript 教程进行了操作。我已经检查并检查了我的代码是否与教程中的代码完全相同,我看不出任何错误,但它不起作用。我看到向左和向右箭头以及中间的第一张图片。当我按下指向后面的箭头时,我收到一条“开始拍照”消息,这似乎是正确的。但另一个似乎什么也没做。

            <SCRIPT LANGUAGE = "Javascript">
                var p1 = new Image();
                var p2 = new Image();
                var p3 = new Image();
                var p4 = new Image();
                var p5 = new Image();

                p1.scr="pic_1.jpg";
                p2.scr="pic_2.jpg";
                p3.scr="pic_3.jpg";
                p4.scr="pic_4.jpg";
                p5.scr="pic_5.jpg";

                var imgArray = new Array(p1, p2, p3, p4, p5);

                var counter=0;
                var end = imgArray.length - 1;

                function scroll_backward() {
                        if (counter == 0) {
                                alert("Begin photo");
                        }
                        else {
                                counter--;
                        }
                        document.pic1.scr = imgArray[counter].src;
                }
                function scroll_forward() {
                        if (counter == END) {
                                alert("End of photo's");
                        }
                        else {
                                counter++;
                        }
                        document.pic1.src = imgArray[counter].src;
                }
        </SCRIPT>

我在标签之间有上面的脚本,下表应该显示图像的位置也在我页面上的标签中。(不完全确定这是否正确,因为教程网站没有说明他们需要去哪里):

        <TABLE width="500">
        <TR>
            <TD height="200" width="100">
                    <IMG SRC="forward.gif" onClick="scroll_forward()">
            </TD>
            <TD width="300">
                    <IMG SRC="pic_1.jpg" name="pic1">
            </TD>
            <TD width="100">
                    <IMG SRC="back.gif" onClick="scroll_backward()">
            </TD>
        </TR>
        </Table>

我已经下载了示例图片并检查了它们的名称是否与脚本相对应,并且它们确实如此。我把所有东西都放在同一个文件夹中(没有子)。我看不出有什么问题。任何帮助都是值得赞赏的。

萨卡

我已经查看了教程网站上的代码,并试图通过使其完全匹配来使其工作。 这只导致了第一张照片的显示,其余的都是白色的。然后我试着弄清楚我是否拥有所有的支架,它们似乎没问题。

它应该按如下方式工作: 当我按下前进箭头时,图片从pic_1.jpg变为pic_2.jpg和向前。当我按下向后箭头时,图片应该从较高的图片编号变为较低的图片编号,直到我到达收到消息的行的末尾。

JavaScript 数组 照片库

评论

2赞 Robby Cornelissen 11/15/2023
scr!= ...src
0赞 Robby Cornelissen 11/15/2023
顺便说一句,这是一些非常老派的HTML和JavaScript,你在那里输入。
0赞 Robby Cornelissen 11/15/2023
而且,counter == END 也会导致问题。
1赞 SacajaweaX 11/15/2023
@RobbyCornelissen我已经足够大了,真的很喜欢书,所以我这边没有犹豫。再次感谢您抽出宝贵时间。我已经实施了您的建议,并且正在起作用!当我没有养成任何坏习惯时,我会离开这个教程网站,你会在书店看到我:-)。
1赞 SacajaweaX 11/15/2023
@RobbyCornelissen 始终寻找积极的一面。我找到了一个新的方向,这是一个很好的:)将研究最近日期的初学者书籍,将 MDN 网站添加为书签,并将我的小指牢牢指向 F12 :)

答: 暂无答案