Javascript 构造函数的多个实例不工作

当我只使用一个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（'div'）[numCats]的计算结果为未定义。我不知道为什么会这样。Console.log（）也帮不了我多少忙。谢谢

首先，您的

范围

变量需要在构造函数中声明，以便

window.onload

引用正确的实例。否则，两个

window.onload

处理程序都将引用在

window.onload

触发器时设置的作用域的任何值，该值始终是第二个实例。其次，您需要使用

window.addEventListener（“load”，function（）{…}），而不是设置
window.onload

以便每个实例都有自己的侦听器。

窗口

对象只有一个

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

---

这将删除

作用域

和

numCats

变量，并移动所有的

窗口。onload

函数性到一个处理程序，而不是每个实例都有一个处理程序。

这是实际的代码吗？不确定如何

document.body.getElementById（）

将不会运行错误。另外，您将

var scope

放在

main（）中而不是
函数Cat（）中有点奇怪“<代码> >，每一个新的<代码> CAT/COD>将把它的<代码> < <代码> >作为<代码> CAT/CUT>对象。它不是C++。为什么在构造函数中使用<代码>窗口？OnLoad 和<代码> AppEdCAT/<代码>？和NoCulks< /Cult>总是0。谢谢！我已经删除了范围变量。我喜欢所有不应该出现在其他构造函数中的东西。多亏了你们两个（当然还有@Ethan Lynn），我绝对不会再犯我在这段代码中犯的错误了。document.body.getElementById（）是什么？不确定它怎么能运行一次？谢谢！在阅读您的响应后，出现了很多面部表情。此外，我最终使用了for（）循环而不是forEach（更好的性能）。您是否运行了他的代码。事实上，我看到了太多其他问题！！