For some reason, the Javascript loads even before my HTML/CSS page is loaded

Question

I am really new to web development. For some reason, the Javascript code (alerts) load even before my HTML/CSS page is loaded. I am using sample alerts to see what happens with the code. It should ideally load the whole web page before it shows the alerts. I looked up on Google for a while and almost every one had said to have call to the Java Script file at the end and that's what I have. It still does not work.

    function go() {
 alert('hi');
 alert('hey there');
    }

    go();

  <header> 
   <nav>
    <h1 class = "second"> RESUMAKER </h1>
    <ul>
     <li><a href="build.html" target="_blank"><span> Build Your Resume </span></a></li>
     <li><a href="createaccount.html" target="_blank"><span> Create Account </span></a></li>
     <li><a href="signin.html" target="_blank"><span> Sign in </span></a></li>
     <li><a href="resources.html" target="_blank"><span> Resources </span></a></li>
     <li><a href="contacts.html" target="_blank"><span> Talk To Us </span></a></li>
    </ul>
   </nav>
  </header>

  <h1 class = "third"><strong> What we do? </strong></h1>
  <p> 1. We create your resume when you input information such as personal information, educational history, work experience and skills. </p>
  <p> 2. The inputted information will be collected, stored, converted and in turn generate arrays of information which can be transformed into a resume.</p>
  <p> 3. Then we let you select a predefined resume template all with different fonts and designs, to generate a resume. </p>
  <p> 4. After all that is done, we allow you to be able to download generated resume as a PDF, Google or Microsoft Word document. </p>

  <div class="footer">
     <li><a href="build.html" target="_blank"> Build a resume </a></li>
   <li><a href="createaccount.html" target="_blank"> Create Account </a></li>
   <li><a href="signin.html" target="_blank"> Sign in </a></li>
   <li><a href="resources.html" target="_blank"> Resources </a></li>
   <li><a href="contacts.html" target="_blank"> Contact us </a></li>
  </div>

  <div class="icon-bar">
   <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> 
   <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> 
   <a href="#" class="google"><i class="fa fa-google"></i></a> 
   <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
   <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> 
  </div>

The problem is that you're using `alert`, which *blocks* the browser - use something more user-friendly which doesn't block, and there shouldn't be an issue — CertainPerformance, Nov 02 '18 at 01:31

score 0 · Answer 1 · answered Nov 02 '18 at 01:32

0

This happened because you are already calling the go function, as specified in your last statement (go();). Therefore, the alert is issued as soon as the script is loaded, which might be earlier than loading your HTML/CSS page.

To prevent this, delete that statement, then call go function from within your HTML page.

answered Nov 02 '18 at 01:32

Andreas

2,455
10
21
24

I was just following a tutorial video on YouTube, and the guy did the same thing (calling go function like I did) but it loaded after the web page was loaded for him. – Patel Aashiv Nov 02 '18 at 01:35
That might be caused by some other reasons, because that code never specifies if the `go()` function has to be called after the page is loaded. To specify that, you can take a look at this question (https://stackoverflow.com/questions/11936816/call-a-function-after-complete-page-load) – Andreas Nov 02 '18 at 01:38
How do I make it load after the HTML page has been loaded? – Patel Aashiv Nov 02 '18 at 01:39
Please take a look at the link that I provided – Andreas Nov 02 '18 at 01:41
I did but I am not using JQuery, and I want separate files for JS and just want to call JS file in HTML, just like CSS. Is there an easier way to make it do that? That link just confused me more. – Patel Aashiv Nov 02 '18 at 01:49
Try using this in your JS file (taken from the top voted answer in that link) `document.addEventListener('DOMContentLoaded', function() { // your code here }, false);` There are also some other JS solutions in the subsequent answers, please read through those and try it out first – Andreas Nov 02 '18 at 01:52
I already did try that one, and one more from that but there's no change. – Patel Aashiv Nov 02 '18 at 01:59
Yes, I have tried it but it wouldn't work. But the code Jermahl sent works fine. I am not sure if it will be efficient to just use that for the whole web page when it will have more Java Script code, but it seems to work fine for now. – Patel Aashiv Nov 02 '18 at 02:25

Electrox Mortem · Accepted Answer · 2018-11-02T02:37:06.253

You can set a timeout. This will cause it to wait 20 milisecond before running go. It seems that the alerts run at the exact moment the dom is ready, giving it no time to render. In this example, it renders, then it alerts.

var go = () => {
    alert('hi')
    alert('hey there')
}
window.addEventListener('load', async () => {
    await new Promise(resolve => {setTimeout(resolve, 20)})
    go()
})

<head>
    <title>Resumaker</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
</head>

<body>

    <header> 
        <nav>
            <h1 class = "second"> RESUMAKER </h1>
            <ul>
                <li><a href="build.html" target="_blank"><span> Build Your Resume </span></a></li>
                <li><a href="createaccount.html" target="_blank"><span> Create Account </span></a></li>
                <li><a href="signin.html" target="_blank"><span> Sign in </span></a></li>
                <li><a href="resources.html" target="_blank"><span> Resources </span></a></li>
                <li><a href="contacts.html" target="_blank"><span> Talk To Us </span></a></li>
            </ul>
        </nav>
    </header>

    <h1 class = "third"><strong> What we do? </strong></h1>
    <p> 1. We create your resume when you input information such as personal information, educational history, work experience and skills. </p>
    <p> 2. The inputted information will be collected, stored, converted and in turn generate arrays of information which can be transformed into a resume.</p>
    <p> 3. Then we let you select a predefined resume template all with different fonts and designs, to generate a resume. </p>
    <p> 4. After all that is done, we allow you to be able to download generated resume as a PDF, Google or Microsoft Word document. </p>

    <div class="footer">
        <li><a href="build.html" target="_blank"> Build a resume </a></li>
        <li><a href="createaccount.html" target="_blank"> Create Account </a></li>
        <li><a href="signin.html" target="_blank"> Sign in </a></li>
        <li><a href="resources.html" target="_blank"> Resources </a></li>
        <li><a href="contacts.html" target="_blank"> Contact us </a></li>
    </div>

    <div class="icon-bar">
        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> 
        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> 
        <a href="#" class="google"><i class="fa fa-google"></i></a> 
        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
        <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> 
    </div>


    <script type="text/javascript" src="main.js"></script>

</body>

I'm sorry, but I gotta downvote this. This is a workaround, and pretty bad one at best. Unless you can explain why `window.onload` doesn't work than this answer is basically "the way to do it doesn't work for some reason so here's some bad code to fix it". Also, if a browser is really, really, really, crappy and doesn't load the DOM by 1 sec than it won't work. — JBis, Nov 02 '18 at 02:31
@JermahlWhite Great! When you edit, comment back I will be sure to change my vote :) — JBis, Nov 02 '18 at 02:35
Promises are my favorite! I absolutely love using async functions. Also I edited — Electrox Mortem, Nov 02 '18 at 02:37

For some reason, the Javascript loads even before my HTML/CSS page is loaded

2 Answers2