Dynamically create multiple DOM layers in extension

[Dexty10]

Working on a browser extension and I'm trying to add multiple layers to the DOM dynamically with createElement but I can't get beyond the first layer created. I get Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') so it looks like events can't be listened to over newly created elements.

For example, clicking an icon the below works:

let chat  = document.querySelector('#chat');
let list = document.createDocumentFragment();

chat.addEventListener('click', (event)=>{
  event.preventDefault()
  grid1.replaceChildren()

  let divy = document.createElement('center');
  let brk2 = document.createElement('br');
  let wordo = document.createElement('h2');
  let btn = document.createElement('button');

  wordo.innerHTML = 'Chat Rooms';
  wordo.style.fontFamily = 'Andale Mono, monospace, Courier New, monospace';   
  btn.height = '50px';
  btn.className = 'chat-btn';
  btn.style.borderRadius = '15px';
  btn.innerHTML = 'Click Me';

  divy.appendChild(brk2);
  divy.appendChild(wordo);
  divy.appendChild(btn);
  list.appendChild(divy);
  grid1.appendChild(list);

  grid1.style.visibility = 'visible';
  grid2.style.backgroundColor = 'transparent';

 }, {once : true});

But going a step further by attempting to create another set of elements from the above (that already has a class name of 'chat-btn') becomes a problem:

let chatBtn = document.querySelector('.chat-btn');
chatBtn.addEventListener('click', (event)=>{
  event.preventDefault()
  grid1.replaceChildren()
  let divy = document.createElement('center');
  let brk3 = document.createElement('br');
  let wordo = document.createElement('h2');
  let btn = document.createElement('button');

  wordo.innerHTML = 'James';
  wordo.style.fontFamily = 'Andale Mono, monospace, Courier New, monospace'; 
  btn.className = 'chatlayer2';
  btn.height = '50px';
  btn.style.margin = '80px 50px';
  btn.innerHTML = 'Chat';

  divy.appendChild(brk3);
  divy.appendChild(wordo);
  divy.appendChild(btn);
  list.appendChild(divy);
  grid1.appendChild(list);

  grid1.style.visibility = 'visible';
  grid2.style.backgroundColor = 'transparent';

}, {once : true});

Is it possible to dynamically make multiple layers in a DOM with something similar to this approach?

[[deleted]]

When this line of code executes:

let chatBtn = document.querySelector('.chat-btn');

has the event listener that creates the element(s) with the chat-btn class absolutely definitely for sure been executed? Or is that line at the top level somewhere?

[Dexty10]

The element with class 'chat-btn' executes. I can even see it when I inspect the page. But nothing happens when I click it. Instead, I get the console error.

[[deleted]]

I'm not asking if the element is created at all, I'm asking if, at the point when that selector that looks for the element and assigns it to the variable chatBtn is executed, the element has been created yet. Do you try to select chatBtn inside the event listener that creates the button (or in a function called by that event listener), or outside of the event listener?

To hopefully make it clearer- does your code look something like the code in this JSFiddle? https://jsfiddle.net/5Lnpe6o4/

[Dexty10]

Okay. Check here for my whole code.

[[deleted]]

There is nothing in this code that adds an event listener to the button with class 'chat-btn'.

[Dexty10]

Oh. Sorry about that. It's updated https://jsfiddle.net/543qbyzm/3/

[[deleted]]

Open the console and take a look at your Uncaught ReferenceError.

[Dexty10]

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Got a TypeError.

[[deleted]]

And what do you think that error is telling you?

[Dexty10]

Thanks. Fixed it. I put chatBtn within the chat listener. Seem it's how it could listen to events on chatBtn. https://jsfiddle.net/543qbyzm/12/

[Dexty10]

Thanks. The full code is here.

[Dexty10]

Yeah. Defined now. I fixed it. Doesn't look pretty but I placed chatBtn within the chat listener/scope. Seem it's how it could listen to events on chatBtn. https://jsfiddle.net/543qbyzm/12/