[Beginner] [Electron] How to access DOM element


#1

Hi there,

i’m struggling with a problem for days now:

I’ve successfully loaded a html page to the app, and even stylised using css

In my html page, I linked a JS file to perform a simple task,

"use strict";

var nav = document.querySelector('.nav');
nav.classList.add('up');

and the electron console return me:

Uncaught TypeError: Cannot read property ‘classList’ of null

I’ve tried many different way, and none of them were sucessful; is this the wrong way to do it ?

In advance, Thank you for helping me :yum:

EDIT 1: Github Repo


#2

Well nav is null, for whatever reason.

If you open the JS console on this page and do:
var nav = document.querySelector('.atom-io-bar');
nav will give you an element.

However, if you look for a class that doesn’t exist, like this:
var nav = document.querySelector('.atom-io-bar-not-a-thing');
nav will return a null value.

I’ve not looked too deeply at your repo, I don’t really have the time to make sense of the single-line of HTML, but for some reason, an element can’t be found to be returned to you.


#3

Hey, Thanks for your answer,

I just found out that Electron dosen’t defer the JS file loading, especially if you put it in the head tag, these few lines do the trick

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Hope this can help someone else :innocent: