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.

Why are you doing this? Just append to the document your <link> or <script> with needed href and src. — Angels
– Angels, Commented Jul 5, 2017 at 17:38
I am loading jss & css dynamically so that these files are requested only when they are needed. — HackYa
– HackYa, Commented Jul 5, 2017 at 17:40
Just checking: You don't run both of these snippets together, right? — Siguza
– Siguza, Commented Jul 5, 2017 at 17:41
@Siguza, no. I've just wrote pertinent part of the script to show/narow down what the issue is. — HackYa
– HackYa, Commented Jul 5, 2017 at 17:46

O. Borcuhin · Accepted Answer · 2017-07-05 18:00:43Z

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 5, 2017 at 18:00

answered Jul 5, 2017 at 17:42

O. Borcuhin

2792 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

HackYa Over a year ago

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.

O. Borcuhin Over a year ago

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

HackYa Over a year ago

@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?

O. Borcuhin Over a year ago

It's not a bug. I added some explanation upper, see UPDATE

HackYa Over a year ago

@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.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related