object with html code and method to print

Question

Can anyone help and see the problem why the code does not work. Trying to organize the code into an object. Check codepen link

//trying to organize this code into an object.

// var flag0 = document.getElementById("flag0");
// var flagFranskaFlaggan = `<div class="flag frankrike"><div class="part1"></div><div class="part2"></div></div>`;
// flag0.innerHTML = flagFranskaFlaggan;

//The object!
var flag = {
    draw: function() {
        var htmlId = this.htmlId;
        var cssflag = this.cssFlag;
        htmlId.innerHTML = cssFlag;
    }
}

var flag0 = Object.create(flag);
flag0.init = function(cssFlag, htmlId) {
    this.cssFlag = cssFlag;
    this.htmlId = htmlId;
}

flag0.init(`<div class="flag frankrike"><div class="part1"></div><div class="part2"></div></div>`, flag0);
flag0.draw();

How to insert flag0 with document.getElementById("flag0") in to an object?

Answer 1

You need to call document.getElementById() in the draw() method. And you need to pass a string as the second argument when you call init().

Also, you should put the init() method in the object, not separate from it.

var flag = {
    draw: function() {
        document.getElmeentById(this.htmlId).innerHTML = this.cssFlag;
    },
    init: function(cssFlag, htmlId) {
        this.cssFlag = cssFlag;
        this.htmlId = htmlId;
    }
}

var flag0 = Object.create(flag);
flag0.init(`<div class="flag frankrike"><div class="part1"></div><div class="part2"></div></div>`, 'flag0');
flag0.draw();