I can print the result in the console but it doesn't work in my js

Question

I can print this in the console. This is the link

document.getElementsByClassName('flip-card-back')[0].innerHTML

But when I'm doing the same in the JS (in an extension in firefox) this doesn't work.

console.log(document.getElementsByClassName('flip-card-back')[0].innerHTML)

window.addEventListener('load', function () {
    var eles = document.getElementsByClassName('flip-card-back')[0].innerHTML;
    console.log(eles);
})

What I'm doing wrong?

Edit: I've tried using MutationObserver.

According to the documentation of MutationOberserver I've tried using it.

// Select the node that will be observed for mutations
console.log('test');
const targetNode = document.getElementsByClassName('flip-card-back');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
console.log('test2')
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
console.log('test3')

Test and test2 is printed but test3 is never printed, seems like it keep observing but never getting anything.

Answer 1

I can't test it, but I think you want something like this.

In the callback, loop through the added nodes and check for the class that you're looking for. If it's an attribute modification, check if the target element now has the class.

document.getElementById("addcard").addEventListener("click", () => {
  let newNode = document.createElement("div");
  newNode.id = "card";
  document.getElementById("foo").appendChild(newNode);
});

document.getElementById("addclass").addEventListener("click", () => document.getElementById("card") ?.classList?.add("flip-card-back"));

console.log('test');
const targetNode = document.body;

// Options for the observer (which mutations to observe)
const config = {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class']
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for (const mutation of mutationsList) {
    if (mutation.type = 'childList') {
      for (const node of mutation.addedNodes) {
        if (node?.classList?.includes("flip-card-back")) {
          alert("flip-card-back node added", node.innerHTML);
          return;
        }
      }
    } else if (mutation.type == 'attributes') {
      if (mutation.target.classList.includes("flip[-card-back")) {
        alert("flip-card-back class added", node.innerHTML);
        return;
      }
    }
  }
}

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
console.log('test2')
// Start observing the target node for configured mutations
observer.observe(targetNode, config);

#foo {
  height: 50px;
  width: 50px;
  background-color: yellow;
}

#card {
  height: 20px;
  width: 20px;
  background-color: green;
}

#card.flip-card-back {
  background-color: red;
}

<div id="foo"></div>

<button id="addcard">Click to add node</button>
<button id="addclass">Click to add class</button>

Answer 2

Are you able to use jQuery? if so, you could try

$(document).ready(function(){
    var eles = document.getElementsByClassName('flip-card-back')[0].innerHTML;
    console.log(eles);
})

Otherwise try this

(function() {
   var eles = document.getElementsByClassName('flip-card-back')[0].innerHTML;
    console.log(eles);
})();

Answer 3

Seems like the actual window is loaded but not the content inside of it. It may take a little longer for the browser to setup all Elements depending on the Project. The Content is mostly rendered in the order you wrote it in HTML. So i recommend putting the script after the body tag. Hope this explains and fixes your problem!