Error cannout set properties of null - java loading before dom?

craftzneko commented 8 months ago

I have this JS


var device = {
  icon: 'laptop' // this can be any Font Awesome icon name
};

var iconElement = document.getElementById('device');
iconElement.className = 'fas fa-' + device.icon + ' fa-8x'; // Added 'fa-8x' for size

html

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<div class="parent">
  <div class="leftcolumn">
    <i id="device"></i>
  </div>
  <div class="rightcolumn"></div>
</div>

and it works until the page reloads then i get this error

Its almost like the Javascript is running before the dom is loaded, i tried wrapping in

window.onload = function() {

But that just never works, any ideas what might be going on here?

akshay996 commented 8 months ago

Try this, it worked for me:

// make sure the HTML elements exist before calling them
function docReady(fn) {
  // see if DOM is already available
  if (document.readyState === "complete" || document.readyState === "interactive") {
    // call on next available tick
    setTimeout(fn, 1);
  } else {
    document.addEventListener("DOMContentLoaded", fn);
  }
}

docReady(function () {
  var device = {
    icon: 'laptop' // this can be any Font Awesome icon name
  };

  var iconElement = document.getElementById('device');
  iconElement.className = 'fas fa-' + device.icon + ' fa-8x'; // Added 'fa-8x' for size
});

craftzneko commented 7 months ago

That seems to work well cheers @akshay996

craftzneko commented 7 months ago

Hi @akshay996 i used your code and put a console log and i can see its getting called multiple times a second. Do you get the same behaviour?

OK suddenly realised the obvious, the option for continuously redraw live dashboards was on

VolkovLabs / volkovlabs-dynamictext-panel

Error cannout set properties of null - java loading before dom? #225