How to find a dynamically added array element in a function

Question

So basically I'm adding an element to an array and then creating a block of text for that element. The problem is I keep getting undefined as the result of calling that element in a function I created to set the block text to the dynamically added element text. When I click on the block it goes through a $(document).on(click) function and so all of the data in the arrays shows up.

The save function:

function saveNote() {
    var noteTitle = document.getElementById("note-title");
    var noteText = document.getElementById("note-text");

    var noteTitleContent = noteTitle.value;
    var noteTextContent = noteText.value;

    /* SAVING NOTE HEADER & TEXT IN DOUBLE ARRAY */
    chrome.storage.local.get('noteTitleList', function (x) {
        var titleSet = x.noteTitleList;
        titleSet.push(noteTitleContent);

        chrome.storage.local.set({noteTitleList: titleSet}, function() {
            console.log('titleSet Saved: ' + titleSet);
        });
    });

    chrome.storage.local.get('noteTextList', function (x) {
        var textSet = x.noteTextList;
        textSet.push(noteTextContent);

        chrome.storage.local.set({noteTextList: textSet}, function() {
            console.log('textSet Saved: ' + textSet);
        });
    });

    addNote();
}

The addNote function:

function addNote() {
    chrome.storage.local.get('noteTitleList', function (x) {
        var titleSet = x.noteTitleList;
        var titleSetLength = titleSet.length;
        var noteTitle = titleSet[titleSetLength]; // results in an undefined

        $element = document.createElement("section");
        $($element).addClass('note-' + titleSetLength);
        $($element).addClass('notelink');
        $element.appendChild(document.createTextNode(noteTitle)); // section text says undefined
        document.getElementById('saved-note-area').appendChild($element);
        $delete = document.createElement("i");
        $($delete).addClass('fa');
        $($delete).addClass('fa-trash-o');
        $($delete).addClass('trash-' + titleSetLength);
        document.getElementById('saved-note-area').appendChild($delete);
    });
});

Answer 1

I got your code to work with four changes:

---

(1) The biggest change was to rewrite the saveNote() function so it does not call addNote() until the chrome.storage.local.set function's callback is called. This change is needed because the chrome.local.storage functions are asynchronous.

function saveNote() {
    var noteTitleContent = document.getElementById("note-title").value;
    var noteTextContent = document.getElementById("note-text").value;

    /* SAVING NOTE HEADER & TEXT IN DOUBLE ARRAY */
    chrome.storage.local.get(['noteTitleList', 'noteTextList'], function (x) {
        var titleSet = x.noteTitleList || [];
        var textSet = x.noteTextList || [];

        titleSet.push(noteTitleContent);
        textSet.push(noteTextContent);

        chrome.storage.local.set({noteTitleList: titleSet, noteTextList: textSet}, function() {
            addNote();
        });
    });
}

Notice how you can store values to both arrays in one call to chrome.storage.local.set .

---

(2) There is a syntax error for the closing of the addNote() function. Change }); to just } .

---

(3) In the addNote() function, subtract one from the array length to get the last item. Change to:

var noteTitle = titleSet[titleSetLength-1];

---

(4) In the click handler for the note link (which you removed from the question), add 1 to c when putting together the class name. This is needed because the loop index c is zero-based, while the numbers on the class names are one-based.

if($this.hasClass('note-'+(c+1))) {

That line occurs in two places.

---

You should also place all the code in a document-ready handler. (At least the code that registers the event handlers should go in there.)

---

There are other improvements I would recommend, but this answer is already quite long. The biggest would be to get rid of the for-loops in the click-handler for the note links.