Why won't loading js once doesn't work when css works?

Question

This loads css only once just fine.

 if (filetype=="css" && !document.querySelector('.load_once') ) { 
    var fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
    fileref.setAttribute("class", "load_once")
}

However, the same script won't work for js files.

 if (filetype=="js" && !document.querySelector('.load_once') ) {
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
    fileref.setAttribute("class", "load_once")
}

I've solved the problem by emptying out the function after it fires so that the function fires only once.

However, I would still like to learn why the above script only worked for css files & not for js files.

What have I done wrong here?

I can't see why this shouldn't work.

Is this one of those weirdness of javascript? Some sort of bug inherent in javascript itself?

Edit

Pls. see my reply to Borcuhin's comment below.

My argument is that apple with red color or

red apple != red orange.

So logically, I am arguing that my script above should work; but it doesn't!!

Somebody please explain/correct me & let me know how & why javascript treats/thinks read apple is same as red orange.

I am loading jss & css dynamically so that these files are requested only when they are needed. — HackYa, Jul 05 '17 at 17:40
Just checking: You don't run both of these snippets together, right? — Siguza, Jul 05 '17 at 17:41
@Siguza, no. I've just wrote pertinent part of the script to show/narow down what the issue is. — HackYa, Jul 05 '17 at 17:46

O. Borcuhin · Accepted Answer · 2017-07-05T18:00:43.247

1

You can insert script tag like this:

var script = document.createElement('script');
script.setAttribute('src', '/script.js');
// put tag to the head
document.getElementsByTagName('head')[0].appendChild(script);

UPDATE You need to use different classes for each file include. Because once you added tag with class some_class_name, selector: document.querySelector('.some_class_name') will find 1 element. So you just need to use some_other_class_name for js file or other file, or generate randomly the classname If you can have N different files

edited Jul 05 '17 at 18:00

answered Jul 05 '17 at 17:42

O. Borcuhin

234
2
5

Um.. I don't understand what your point is. I am not having issue with loading the script. And as I've mentioned, I've already solved the issue. My question is, why wouldn't the conditional statement work for js files when it should work. – HackYa Jul 05 '17 at 17:49
It looks like you for css file and for js file you need to use different classes. Like for css - load_once and for js js_load_once for instance. Because you insert your tag with css and after that you have `document.querySelector('.load_once')` , so conditional will not work of course, because `document.querySelector('.load_once')` will find that `css file tag` – O. Borcuhin Jul 05 '17 at 17:54
@Borcuhin, yeah that solves it. However, can you please explain to me why that should be? Again, I am not looking for a solution here. I want somebody to explain to me why this is the case. css file with a class of load_once != js file with a class of load_once. So I think this is a javascript bug? Or maybe I am not understanding javascript properly? – HackYa Jul 05 '17 at 17:59
It's not a bug. I added some explanation upper, see **UPDATE** – O. Borcuhin Jul 05 '17 at 18:02
@Borcuhin, that's why I've put in the other condition. filetype=="css" && vs. filetype=="js" && javascript just ignores filetype here? I guess my issue is that I disagree with the way javascript is parsing element. To me, red apple does not equal red orange. I've chosen your answer but I am not bit satisfied with your explanation. – HackYa Jul 05 '17 at 18:07
But you forgot about `&& !document.querySelector('.load_once')`. When you trying to add JS file, you already added CSS. And condition `!document.querySelector('.load_once')` will not work, because it'll find css tag, like I was saying. You need to use another class for JS, like `.some_js_load_once` and for js case use this: `filetype=="js" && !document.querySelector('.some_js_load_once')`. This will work – O. Borcuhin Jul 05 '17 at 18:10
btw, even if I agree that different class should be used/ if that's the case, js file should load & cass file shouldn't load. In my script, js is conditionally loaded first & css is loaded after js. Browsers parse html, css, & js top down. I hope you understand where I am going with this. So this is totally messed up regardless of how you look at it. – HackYa Jul 05 '17 at 18:14

Why won't loading js once doesn't work when css works?

1 Answers1