Question

我是ECMA 6课程的新手。我有两个课程 - 我的App.js和一个简单的Image.js课程。
我正在尝试在div中创建一个空的App.js，并将该div id传递给图像类以附加img src。它似乎在document.getElementbyID

中的Image.js失败了

有什么想法吗？

App.js

 class KK_App{

        constructor(src, width, height){

            this._imgdiv = document.createElement('div');
            this._imgdiv.setAttribute('id', 'posterphoto');

            var newpic = new KK_Image('poster_outlines2.png', 240, 250, this._imgdiv);
            newpic.draw();

        }

    }

KK_Image.js

class KK_Image{

    constructor(src, width, height, parent){
        this._src = src;
        this._width = width;
        this._height = height;
        this._parent = parent;
        this._parentid = this._parent.getAttribute('id');
    }

    draw(){
        console.log( this._parentid );
        const markup = `<img src='${this._src}' width='${this._width}' height='${this._height}'></img>`;
        document.getElementById(${this._parentid}).innerHTML = markup;

         //it dies here saying ${this._parentid} is null
         //it works if I pass the id of a div that is already loaded into the dom in html

    }

}

Answer 1

执行this._imgdiv = document.createElement('div');时 - 这只会创建一个元素。

您还需要将其附加到您的页面，例如：

document.body.appendChild(this._imgdiv)

执行document.getElementById(...时，元素必须位于要找到的页面中。

Answer 2

看起来您只创建元素，但不要将其添加到任何位置。在KK_App中，您可以创建新元素并分配给实例属性。然后在课程KK_Image中，您希望该文档具有您的元素 - 这种假设是错误的，因为您从未将该元素添加到文档中。

为此，您必须使用例如appendChild函数。

正确的解决方案应如下所示：

class KK_App{
    constructor(src, width, height){

        this._imgdiv = document.createElement('div');
        this._imgdiv.setAttribute('id', 'posterphoto');
        document.body.appendChild(this._imgdiv); // <- HERE
        var newpic = new KK_Image('poster_outlines2.png', 240, 250, this._imgdiv);
        newpic.draw();

    }

}

ES6类问题

2 个答案: