Question

All,

Here is my code for a script I am working on.

WHAT IT DOES:
When the blue button is pressed, a div should appear on top of the box containing the ‘5000’ number.

The problem I am having is with the usage of innerHTML & assigning an id to dynamically created div. I am not getting any errors in Firebug so am not sure what/ where I am going wrong.

The problem lines:

eCreditTransactions[i].id = ("trans" + i);

eCreditTransactions[i].innerHTML = '<div class="cCreditContainer"><span class="cCreditsNo">-50</span>&nbsp;<img class="cCurrency" src="" alt="" /></div><span class="cCloseMsg">Click box to close.</span><div class="dots"></div><div class="dots"></div><div class="dots"></div>';

And here is the full code:

var eCreditSystem = document.getElementById("creditSystem");
var i = 0;
var eCreditTransactions = new Array(6);                 // 6 instances created which will be recycled

function createCreditTransaction ()                 // func called when a transaction occurs, at the mo, attached to onclick()
{
    if (i < 6)
    {
        $(eCreditTransactions[i]).remove();
        eCreditTransactions[i] = undefined;                 // to delete the existing data in the index of array
        addingElements (i);                 // calling function
    } else
    if (i > 5 || eCreditTransactions[i] != undefined)
    {
        i = 0;
        $(eCreditTransactions[i]).remove();
        eCreditTransactions[i] = undefined;
        console.log(eCreditTransactions[i]);
        addingElements (i);
    }
}

function addingElements (arrayIndex)                    // func called from within the 'createCreditTransaction()' func
{
    console.log(eCreditTransactions[i]);
    eCreditTransactions[i] = $(document.createElement('div')).addClass("cCreditTransaction").appendTo(eCreditSystem);

// the problem area

    eCreditTransactions[i].id = ("trans" + i);
    eCreditTransactions[i].innerHTML = '<div class="cCreditContainer"><span class="cCreditsNo">-50</span>&nbsp;<img class="cCurrency" src="" alt="" /></div><span class="cCloseMsg">Click box to close.</span><div class="dots"></div><div class="dots"></div><div class="dots"></div>';

    console.log(eCreditTransactions[i]);
    return i++;
}

Jsfiddle

Answer 1

in this line of your code:

 eCreditTransactions[i] = $(document.createElement('div'))

you are creating a dom element and then wrapping it in a jQuery object

to access an id attribute on that object you need to use its methods

 eCreditTransactions[i].attr('id', 'newId');

the same for innerHTML property

use jQuery method html();

 eCreditTransactions[i].html(yourHtmlString);

see here docu