logo标签列表

JavaScript变量未定义

javascripthtmlvariables
3
<html>
<head>
    <title>Array of images</title>
    <script type="text/javascript">
        var myPics = new Array[3];
        myPics[0] = "./img/blue.png";
        myPics[1] = "./img/red.png";
        myPics[2] = "./img/yellow.png";
        var counter = 0;

        function preImg(){
        alert(counter);
            if(counter == 0)
                counter = 4;

            counter --;
        alert(counter);
            document.getElementById("coloredImg").src = myPics[counter];
        }

        function nextImg(){
            if(counter == 3)
                counter = -1;

            counter ++;

            document.getElementById("coloredImg").src = myPics[counter];
        }
    </script>
</head>
<body>
    <img src="./img/blue.png" id="coloredImg" alt="Image not found"/>
    <input type="button" onclick="preImg()" value="Previous"/>
    <input type="button" onclick="nextImg()" value="Next"/>
</body>
</html>

我遇到的问题是，在函数内部我的计数器变量未定义。例如，当我调用preImg函数时，它会弹出一个未定义的警报（应该只是0），而第二个警报显示NaN（应该是3）。为什么我的函数无法识别我的“var counter”，它不是全局的吗？你认为变量mypics也会发生同样的情况吗？

3个回答
8
new Array[3];

应该是

new Array(3);

但是，建议使用方括号符号来创建数组（也不需要指定长度）：

var myPics = [];

你可能会问，为什么要使用这种语法？有很多原因：
  1. []是创建数组的一种更快且更短的方式。
  2. 数组构造函数可以被覆盖，而像这样的语法结构则不行。
  3. 它在代码中更容易被发现，从而使调试变得更加容易。
  4. 它具有接受单个元素（例如[5]）并将其解释为数组长度的能力，这是使用繁琐的Array构造函数时经常遇到的问题。
4
3

使用对 element、pics 和 counter 进行闭包的简单幻灯片对象：

function Slideshow(element, pics) {
    var counter = 0;

    this.nextImg = function () {
        element.src = pics[counter];
        counter = (counter + 1) % pics.length;
    }
    this.nextImg(); // init
}

使用方法：

var show = new Slideshow(
    document.getElementById("coloredImg"),
    ["./img/blue.png", "./img/red.png", "./img/yellow.png"]
);

show.nextImg(); // red
show.nextImg(); // yellow
show.nextImg(); // blue

闭包可以确保在函数定义时处于作用域中的每个变量，在函数被调用（或再次调用）时仍然处于作用域内。这种标准的 JavaScript 技术优雅地解决了您的计数器问题。
使用模数计算让计数器重复序列 0、1、2（以此类推，本例中为示例）。
编辑：假设您想每三秒切换一次新图像：
setInterval(show.nextImg, 3000);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接