Question

当我只用一个Cat（var cat1）实例运行这个程序时，它运行得很好。 当我运行第二个实例（var cat2）时，会停止工作。

function main() {
    var catPic = document.getElementById('catPic');
    var numClicks = 0;
    var numCats = -1;
    var scope;

    var Cat = function Cat(name, url) {
        numCats++;
        scope = this;
        this.name = name;
        this.url = url;
        this.numClicks = 0;
        this.clickId = 'clicks' + numCats;

        window.onload = function() {

            //Puts a new Cat on the screen. The name, image, and # of clicks will be shown.
            appendCat(scope.name, scope.url, scope.clickId, scope.numClicks, numCats);

        }
    };

    var cat1 = new Cat('Bob', 'https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426');
    var cat2 = new Cat('Samantha', 'https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426');
}

main();

问题与appendCat（）有关;功能。

    //Puts a new Cat on the screen. The name, image, and # of clicks will be shown.
    function appendCat(name, url, clickId, numClicks, numCats) {
        document.body.appendChild(document.createElement('div'));
        document.getElementsByTagName('div')[numCats].setAttribute('id', 'cat' + numCats);

        document.body.getElementById().appendChild(document.createElement('h2'));
        document.getElementsByTagName('h2')[numCats].textContent = name;

        document.body.appendChild(document.createElement('img'));
        document.getElementsByTagName('img')[numCats].setAttribute('id', name);
        document.getElementsByTagName('img')[numCats].setAttribute('src', url);

        document.body.appendChild(document.createElement('p'));
        document.getElementsByTagName('p')[numCats].setAttribute('id', clickId);
        document.getElementsByTagName('p')[numCats].textContent = numClicks;

        document.body.appendChild(document.createElement('br'));
        document.body.appendChild(document.createElement('br'));
    }

当运行此函数的前两行时， document.getElementsByTagName（＆＃39; div＆＃39;）[numCats] 的计算结果为undefined。我不确定为什么会这样。 Console.log（）也没有帮助我。谢谢！

Answer 1

首先，您的scope变量需要在构造函数中声明，以便window.onload引用正确的实例。否则，两个window.onload处理程序将引用在window.onload触发器时设置的任何范围值 - 这将始终是第二个实例。其次，您需要使用window.onload而不是设置window.addEventListener("load", function () { ... }")，以便每个实例都拥有自己的侦听器。 window对象只有一个onload属性，因此多次设置不会创建多个侦听器，只会覆盖以前的属性。

作为补充说明，我建议从构造函数中删除事件处理并将其置于以下内容之外：

var cats = [
    new Cat(...),
    new Cat(...)
];
window.addEventListener('load', function () {
    cats.forEach(function (cat) {
        appendCat(cat.name, cat.url, cat.clickId, cat.numClicks, cats.length);
    });
});

这将删除scope和numCats变量并将所有window.onload功能移至一个处理程序，而不是为每个实例设置一个处理程序。

多个构造函数实例无法正常工作

1 个答案: