JS before document

Question

I want to call function in JS before document get ready, but I don't know how... Please help my someone. Thanks.

var modal = document.getElementById('myLogin');
var btn = document.getElementById("myBtn2");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  openFunc();
};

function openFunc() {   
  modal.style.display = "block";
}

span.onclick = function() {
  closeFunc();
};

function closeFunc() { 
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

Why would you want to do this? All the elements you are trying to get by id won't be there — baao, Dec 17 '15 at 16:59
Why would you want to call something before `domReady`? Furthermore, what and when exactly? — Sirko, Dec 17 '15 at 16:59
I think all script tags are executed before document is ready. Unless it has a `defer` attribute. — MinusFour, Dec 17 '15 at 17:02
Possible duplicate of [Can I run javascript before the whole page is loaded?](http://stackoverflow.com/questions/2920129/can-i-run-javascript-before-the-whole-page-is-loaded) — MannfromReno, Dec 17 '15 at 17:03
Pointless? No. See @Paulpro's answer. But its probably not the *best* idea unless 1. your page takes a long time to finish rendering, to the point where it harms user interaction (large DOM with 1000's of elements) or 2. you know for a fact that your users are on substandard connections and you want to give them they can interact with while all your async assets finish downloading. And if you are there, you likely need to rethink those 1000's of elements. — Jared Smith, Dec 17 '15 at 17:47

score 0 · Answer 1 · answered Dec 17 '15 at 17:08

0

You can put that in a script tag immediately after all the elements it references. That way you know that part of the DOM is ready, but don't have to wait for the whole thing.

answered Dec 17 '15 at 17:08

Paul

139,544
27
275
264

Although this answers the question, it could arguably use a qualifier like "are you **sure** you want to do that? Why does it need to be before the DOM is done being assembled?". – Jared Smith Dec 17 '15 at 17:27
@JaredSmith Why? If he wants those buttons to be usable as soon as they are rendered, then that is the best place to put the script. I don't understand why so many people advocate putting all your scripts in a document ready handler. – Paul Dec 17 '15 at 17:31
You are correct, and I know that *you* know what I'm about to say, but if the script is not inline it will block until fetched and it is doubtful if the OP understands this or what the tradeoffs are in terms of maintaining inline js vs maximum usability or the diff between sync vs async scriptloading. Which is why everybody parrots the 'put your script tags at the end and use the `DOMContentLoaded` event' line. If you know better then you know better and if you don't you should probably keep it as simple as possible. – Jared Smith Dec 17 '15 at 17:39
@JaredSmith That's a good point. I realize that the OP is quite new, and figured it would only confuse him to tell him a way which works; while at the same time convince him not to use it. I can see that this answer could become more confusing later though, and obviously it would be bad if he started putting all his scripts scattered throughout the DOM without a good reason, based on this. – Paul Dec 17 '15 at 17:47

score -1 · Answer 2 · answered Dec 17 '15 at 17:02

-1

Just call your function in the head tag before the ready statement, but the elements you are trying to get won't exist so your variables will be null...

answered Dec 17 '15 at 17:02

diegorp

77
1
3

Telling someone to do something that you **know** will cause their code to not function properly isn't a good way to answer things. This just leads to more confusion that needs to be cleared up. – Garbee Dec 17 '15 at 17:10
Thanks. I only just started with JS, so the best will be, when I get new code, which solve my problem... :/ – Dec 17 '15 at 17:14

JS before document

2 Answers2