I’m learning JavaScript

I reached Classes, and I don’t know why when i’m coding JS in external “.js” file and linking that to my HTML it doesn’t work but when i do this in html (internal), it works!

index.html

<div id="noticeContainer"></div>

app.js :

class Notice {
  constructor(message = 'Hello, World!') {
    this.element = document.createElement('div');
    this.element.textContent = message;
    this.css =
      'background: silver; border: 3px gray solid; color: gray; font: 18px sans-serif; padding: 8px; margin: 10px';
    this.element.style.cssText = this.css;
  }

  render(element) {
    if (element) {
      element.appendChild(this.element);
    } else {
      console.error('Error: element is null or undefined.');
    }
  }
}

class Success extends Notice {
  constructor(message = 'Success!') {
    super(message);
    this.element.style.background = 'palegreen';
    this.element.style.color = 'green';
    this.element.style.borderColor = 'green';
  }
}

class Info extends Notice {
  constructor(message = 'Information') {
    super(message);
    this.element.style.background = 'powderblue';
    this.element.style.color = 'blue';
    this.element.style.borderColor = 'blue';
  }
}

const noticeContainer = document.getElementById('noticeContainer');

const success = new Success();
success.render(noticeContainer);

const info = new Info();
info.render(noticeContainer);

and i got this error in web console

Error: element is null or undefined.

I like to do this in external js 🙂