Question

我尝试将类似的代码应用于现有的Stackoverflow主题，该主题应用以下代码：http://jsfiddle.net/zsNF5/4/

问题是：当我点击我的按钮时，我收到消息Uncaught ReferenceError: ic1 is not defined。

function ImageCollection(images) {
    this.images = images;
    this.i = 0;

    this.no = function(imgId) {
        var img = document.getElementById(imgId);
        this.i++;
        if (this.i == images.length)
            this.i = 0;
        img.src = images[this.i];
    }

    this.yes = function(imgId) {
        var img = document.getElementById(imgId);
        this.i++;
        if (this.i == images.length)
            this.i = 0;
        img.src = images[this.i];
    }
}

var ic1 = new ImageCollection(
    ['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);

变量ic1在代码中定义，这就是为什么我感到困惑。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Face or no face</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="javascript.js"></script>
</head>
<body>
<div class="title">
    <h1 >IS THIS A FACE?</h1>
</div>
<img class="photo" src="images/test.jpg">
<div class="container">
    <form method="post" action="store.php">
        <input type='button' class="button1" value='NO' onclick='ic1.no("container")' />
        <input type='button' class="button2" value='YES' onclick='ic1.yes("container")' />
    </form>
</div>
</body>
</html>

我希望我清楚，因为我的JS技能显然非常有限。谢谢！

Answer 1

您正在使用var关键字来定义ic1。这将它限制在可能不是窗口的最近范围内。将其定义为全局执行

window.ic1 = new ImageCollection(
    ['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);

Answer 2

链接中的示例中您的<img id='container'喜欢哪里？

这是工作示例中的html代码 -

<img id='container' src="data:image/jpeg;base64,/bla bla bla base 64" >
<input type='button' value='next' onclick='ic1.next("container")' />
<input type='button' value='prev' onclick='ic1.prev("container")' />

这是你的代码，而不是id

 <div class="container">

在您的函数中，您正在寻找var img = document.getElementById(imgId);

因此，请尝试替换ID为<div id="container">

的类

简单的Javascript onclick图像gallary不起作用

2 个答案: