How do I get elements that were created using the DOM instead of HTML?

Question

I tried to use document.getElementsByClassName, but when I did that it gave me a collection of elements like this:

HTMLCollection(2)
0: button#1.remove
1: button#2.remove
length: 2
2: <unreadable>
__proto__: HTMLCollection

When I tried to iterate through it there was nothing in the HTML Collection. I also tried to find the length of the HTML Collection, but it said it was 0. Also these buttons were created using JavaScript. The buttons created using HTML I am able to iterate through.

    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('submit-note').addEventListener('click', add, false);
    document.getElementById('clear').addEventListener('click', clear, false);
    document.getElementById('copy').addEventListener('click', copy, false);
    updateNotes();
    chrome.storage.onChanged.addListener(updateNotes);
    document.addEventListener('keydown', function(event) {
        if (event.keyCode == 13) {
          add();
        }
      });
    var elements = document.getElementsByClassName('remove');
    console.log(elements);
    console.log(elements.length);
    for (item of elements) { 
        console.log(item);
      } 
})

function updateNotes() {
    document.getElementById("note-container").innerHTML = "";
    chrome.storage.local.get(['notes'], function (result) {
        var curNotes = result.notes;
        console.log(curNotes)
        if (curNotes) {
            for (var i = 0; i < curNotes.length; i++) {
                var parsedDate = new Date(JSON.parse(curNotes[i].date))
                var hour = parsedDate.getHours().toString() + ":" + parsedDate.getMinutes() + "am";
                if (parsedDate.getHours() > 12) {
                    hour = parsedDate.getHours() - 12;
                    hour = hour.toString() + ":" + parsedDate.getMinutes() + "pm";
                }
                
                var greatNote = document.createElement("div")
                var fullNote = document.createElement("div")
                var deleteContianer = document.createElement("div");

                var para = document.createElement("p");
                var node = document.createTextNode(curNotes[i].note);
                para.appendChild(node);

                var date = document.createElement("p");
                var dateNode = document.createTextNode(`${parsedDate.getMonth() + 1}/${parsedDate.getDate()}/${parsedDate.getFullYear()} - ${hour}`);
                date.appendChild(dateNode);

                fullNote.appendChild(para);
                fullNote.appendChild(date);

                var remove = document.createElement("button")
                remove.innerHTML = "D";
                remove.id = curNotes[i].id.toString();
                deleteContianer.appendChild(remove);
                
                var element = document.getElementById("note-container");
                greatNote.appendChild(fullNote);
                greatNote.appendChild(deleteContianer);
                element.appendChild(greatNote);

                para.classList.add('note-text');
                date.classList.add('date-text');
                fullNote.classList.add('full-note');
                remove.classList.add('remove');
                greatNote.classList.add('great-note')
            }
        }
    })
}

Does this answer your question? [chrome.storage.local.get and set](https://stackoverflow.com/questions/13872542/chrome-storage-local-get-and-set) -- When you call `updateNotes()` It is calling that asynchronous function and it is its callback that creates the `.remove` class elements you look for. So when calling `console.log(elements.length)`, a couple lines after... The async callback has not executed yet. — Louys Patrice Bessette, Mar 02 '21 at 04:35
Try `async` in front of `function updateNotes() {` and `await` in front of `updateNotes();` — Louys Patrice Bessette, Mar 02 '21 at 04:46
@LouysPatriceBessette Thank you for the help, unfortunately when I added await and async nothing changed. I changed line 5 to await updateNotes(); and I changed line 20 to async function updateNotes() {. I also added async on line because the function needs to be async to have await in it. Is there anything else I can try or that I am missing? — Aditya Ram, Mar 03 '21 at 06:10

score 0 · Answer 1 · edited Mar 03 '21 at 16:18

That was my first comment:

When you call updateNotes() It is calling that asynchronous function and it is its callback that creates the .remove class elements you look for. So when calling console.log(elements.length), a couple lines after... The async callback has not executed yet.

What I forgot to tell is to add new Promise() somewhere.

So you have to add await in front of updateNotes() because that is where you need to wait. But it has to be a promise, else it is considered an already resolved promise... And won't wait. See await documentation.

So here is what I would try (I skipped a couple lines for clarity):

async function functionName (){
  // ...
  await updateNotes();
  // ...
}

async function updateNotes() {
  return new Promise( resolve =>{
  
    document.getElementById("note-container").innerHTML = "";
    await chrome.storage.local.get(['notes'], function (result) {
      // ...
    }
  })
}

I added the new Promise that you suggested, but nothing changed. This is what I have now: async function updateNotes() { return new Promise(async resolve => { document.getElementById("note-container").innerHTML = ""; await chrome.storage.local.get(['notes'], function (result) { //... } }) } — Aditya Ram, Mar 04 '21 at 06:34

How do I get elements that were created using the DOM instead of HTML?

1 Answers1