I can't change dom from dom element stored as an attribute

Question

I Apologize if there is already an answer, I found nothing usefull.

I am developing a little JS code with some blocks that need to change their html code. So I have a main object with 2 kinds of attributes :

• custom objects with a getHtml() method
• dom elements that are initialized with a id tag then should be changed.

My first version worked : i set some javascript event and methods, then my block content was changed.

Of course (!) I needed to modify the code to implements new features and now my method return html code but .innerHTML on my variables does not work anymore.

Let me show you some code and explain it

var AtelierScreen = function(ancre, dataJson){
    if(!ancre.charAt)               throw "Invalid string-dealer name type ('"+ancre+"') should be String";
    if(ancre.length==0)             throw "Invalid string-dealer name ('"+ancre+"') cannot be empty";

    this.atelierContent;
    this.operationMenu;
    this.operationMenuContent;
    this.operationRecap;
    this.operationRecapContent;

    this.create=function(obj,tagsuffix){
        var tag = ancre+tagsuffix;
        this.atelierContent.innerHTML += "<div id='"+tag+"'></div>";
        var content = document.getElementById(tag);
        if(!content)        throw "Invalid html anchor using '"+tag+"' as an html id";
        content.innerHTML=obj.getHtml();
        return content;
    }

    try{
        var dataObject = JSON.parse(dataJson);
        this.atelierContent = document.getElementById(ancre);
        if(!this.atelierContent)            throw "Invalid html anchor using '"+ancre+"' as an html id";

        // MENU
        this.operationMenu = new OperationMenu(dataObject["dealer"],dataObject["operations"]);
        this.operationMenuContent=this.create(this.operationMenu,"_menu");
        this.operationMenuContent.innerHTML+="after init";

        // RECAP
        this.operationRecap = new OperationRecap();
        this.operationRecapContent=this.create(this.operationRecap,"_recap");
        this.operationMenuContent.innerHTML+="after recap init";

    } catch(error){
        throw "Error decoding json data :\n'"+error+"'\n\nJson =\n'"+dataJson+"'";
    }

    this.setSelectedModel=function(model){
        this.operationMenuContent.innerHTML+="setSelectedModel";
        var isTheSame = this.operationMenu.setSelectedModel(model);
        if(!isTheSame) this.clearOperationItemFromRecap();
        var temp = this.operationMenu.getHtml()
        this.operationMenuContent.innerHTML=temp;
    }
}

Quick overview

1. all my attributes and a method to help initializing them.
2. a try catch to check the json data.
3. I initialize my attributes with the method
4. some methods to interact with the program

Here is what happen

1. Json in parsed correctly
2. My 1st block is created, return its html code that is put in the 1st content attribute. I add some text again into the dom as a test (it works)
3. My 2nd block is created, return its html code that is put in the 2nd content attribute. I add some text again in the 1st content attribute as a test. It fail at this point.
4. my methods does not help in any way. My content attribute does not seem to respond.

I can still get the content attribute value atelierScreen.operationMenuContent.innerHTML; But I cannot insert text in dom. atelierScreen.operationMenuContent.innerHTML=""; does nothing.

Do I need to query the dom with document.getElement ... EACH TIME ? My previous version with dom elements as attributes was working...

I am missing something, this is so frustrating ;) Please help. Thanks

Answer 1

Ok, this is what i did

var AtelierScreen = function(ancre, dataJson){
try{
    var dataObject = JSON.parse(dataJson);
    this.atelierContent = document.getElementById(ancre);
    if(!this.atelierContent)            throw "Invalid html anchor using '"+ancre+"' as an html id";

    var blocks = [
        this.operationMenu   = new OperationMenu(...),
        this.operationRecap  = new OperationRecap(...),
        this.operationResult = new OperationResult(...)
    ];

    for (var i = 0; i < blocks.length; i++) {
        var block=blocks[i];
        this.atelierContent.innerHTML += "<div id='"+block.tag+"'></id>";
    }

    for (var i = 0; i < blocks.length; i++) {
        var block=blocks[i];
        block.getContent().innerHTML = block.getHtml();
    }
} catch(error){
    throw "Error decoding json data :\n'"+error+"'\n\nJson =\n'"+dataJson+"'";
}
}

1. I parse Json parameter inside try/catch
2. I create the screen element, that will be used to initialize my anchors
3. I create my array of blocks and initialize my objects in the same time (i wasn't sure it would work, if those attributes would be found later, but it does). Onjects contains their anchors and content parameter.
4. 1st loop to add blocks anchors
5. 2nd loop to create html content