Dynamically add element to another dynamically added element

Question

I need to dynamically add element, that also been created dynamically. I made two buttons. First must add first element, another - add another element to previously created element. But I got an error, because variable, created in first function, cant reach second function (I got "wrapper is not defined").

What Im doing wrong?

document.addEventListener("DOMContentLoaded", function() { init(); }, false);

function init() {

    textButton = document.getElementById('textButton');
    pageButton = document.getElementById('pageButton');

    pageButton.addEventListener('click', addPage, false);
    textButton.addEventListener('click', addTextBlock, false);

    function addPage() {
        var newDiv = document.createElement('div');
        newDiv.setAttribute('class', 'wrapper');
        var wrapper = document.body.appendChild(newDiv);
    };

    function addTextBlock() {
        wrapper.innerHTML += '<p class="draggable">Text Here!</p>';
    };

};

The scope of the variable is in the addPage function, so you can't access it from addTextBlock, you would need to move it outside the function, somewhere in init — Goose
– Goose, Commented Jul 24, 2015 at 23:15

kiranvj · Accepted Answer · 2015-07-24 23:33:59Z

1

You have declared the variable wrapper inside the function addPage, so it is private to that function. Declare the variable inside init()

Try this

document.addEventListener("DOMContentLoaded", function() { init(); }, false);

function init() {
    var wrapper;
    textButton = document.getElementById('textButton');
    pageButton = document.getElementById('pageButton');

    pageButton.addEventListener('click', addPage, false);
    textButton.addEventListener('click', addTextBlock, false);

    function addPage() {
        var newDiv = document.createElement('div');
        newDiv.setAttribute('class', 'wrapper');
        wrapper = document.body.appendChild(newDiv);
    };

    function addTextBlock() {
        wrapper.innerHTML += '<p class="draggable">Text Here!</p>';
    };

};

edited Jul 24, 2015 at 23:33

answered Jul 24, 2015 at 23:15

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jmar777 Over a year ago

I think it's confusing to initialize wrapper to string (i.e., var wrapper; is probably better). But, yeah... this should work.

kiranvj Over a year ago

yeah, its should cast dynamically, though I have updated it to avoid confusion.

s.spirit Over a year ago

Thats it)) So simple... My brain stop working at all as I see. Thanks.

kiranvj Over a year ago

Yeah, it happens to me as well, take a break and start fresh :)

fcreav · Accepted Answer · 2015-07-24 23:29:57Z

1

Call the function and add it as a parameter

 function addPage() {
            var newDiv = document.createElement('div');
            newDiv.setAttribute('class', 'wrapper');
            var wrapper = document.body.appendChild(newDiv);
            addTextBlock(wrapper);
        };

        function addTextBlock(a) {
            a.innerHTML += '<p class="draggable">Text Here!</p>';
        };

    };

Just to add some more: wrapper is in local scope and can only be used by the function it is in. So the DIV will append. As you move to your next function you leave the scope of the last function and wrapper is no longer available. You can declare var wrapper as a global but too many globals can get messy. In the method below function addTextBlock takes one parameter (a) You call the function from within the scope of the wrapper and pass wrapper as (a). This is then available for use in addTextBlock

edited Jul 24, 2015 at 23:29

answered Jul 24, 2015 at 23:19

fcreav

3603 silver badges18 bronze badges

1 Comment

s.spirit Over a year ago

That is not, what I need, cause "addPage" element created already with "addTextBlock". And I need to add it dynamically too... But thanks anyway...

Collectives™ on Stack Overflow

Dynamically add element to another dynamically added element

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related