How to trigger onclick before page is fully loaded

Question

My website is essentially all one very long page and I've got an element I'd like to click before the page is loaded (it takes a while because it's so long), but I can't get it to trigger.

To test what could possibly be the cause of problems I made a very basic button that wrote to the console when clicked and during the loading phase it did nothing and then eventually once everything was fully loaded it worked.

The strange part is that looking up possible solutions so this problem, people unanimously say that the javascript gets loaded at whatever line it's written in the code and the link to my .js file is the second thing in the (right after ) so surely it should be loading immediately.

This isn't the full code obviously because the site is quite long, but here are the relevant parts:

    "use strict";
    
    function test() {
     console.log("testingtesting");
    }
    
    function init() {
        document.getElementById("buttonName").onclick = test;
    }
    
    window.onload = init;

    <head>
    <title>Title</title>
    <script src="script.js"></script>
    </head>

    <body>
       <button id="buttonName">
    </body>

Does anyone have an explanation for why it's behaving the way it is and if there's anything I can do to change it?

you have to share your code or no one will be able to help you — Derek, Dec 11 '18 at 08:10
Welcome to SO ;) Please read this article on [how to ask a good question](https://stackoverflow.com/help/how-to-ask). This would include a proper description of what you are trying to achieve, your code (or the relevant snippets) as well as your efforts showing what you have tried so far and possible error messages. It is also advisable to provide a full [MCVE](https://stackoverflow.com/help/mcve).. — iLuvLogix, Dec 11 '18 at 08:11
the code itself is quite long so I have just added the relevant parts — Josh McGee, Dec 11 '18 at 08:22
See: https://stackoverflow.com/questions/588040/window-onload-vs-document-onload . First thing you find when searching for window.onload — Thomas Scheffer, Dec 11 '18 at 08:27
Please share more info. if you trigger button event then it will fire while loading time. $("#buttonId").trigger('click'); Thank you — Dipti, Dec 11 '18 at 08:29
You have a function call inside the click of a button. You want to have that same function call while loading the page. And your suggested solution is that you want to simulate a click to trigger that function call instead of having that function call inside of the load event? — ChatterOne, Dec 11 '18 at 08:31
I tried changing window.onload to document.onload and the button doesn't work at all, even when the page is fully loaded? — Josh McGee, Dec 11 '18 at 08:35
Dipti: there's not much else that's relevant to share, it's basically just divs full of content ChatterOne: I just want to be able to click the button (that loads quickly at the top) while the rest of the content loads on the page — Josh McGee, Dec 11 '18 at 08:44
@JoshMcGee I'm 98% sure that what you're trying to do is a twisted way to do something that already exists. Can you describe what this button you want to pre-click do? — Richard, Dec 11 '18 at 08:53
The function I want to run toggles the class of an element between two states and I'd like to be able to do that by clicking a button before all of the elements are loaded — Josh McGee, Dec 11 '18 at 08:57

score 1 · Accepted Answer · answered Dec 11 '18 at 08:55

1

When using an button you could use this method.

"use strict";
    
    function test() {
     console.log("testingtesting");
    }

<head>
    <title>Title</title>
    <script src="script.js"></script>
    </head>

    <body>
       <button id="buttonName" onclick="test()"/>
    </body>

And if you did like to start the function as soon as its loaded, you could try a self invoking function.

(function () {
  // body of the function
}());

answered Dec 11 '18 at 08:55

Thomas Scheffer

524
4
7

thankyou! that works! don't fully understand why, but when it works it works – Josh McGee Dec 11 '18 at 09:02

Scott Chambers · Answer 2 · 2018-12-11T09:18:35.153

The CODE!

$(document).ready(function() {
  test();
  
  $("#buttonName").click(function() {
    test();
  });
  
  function test() {
    console.log("testtest");
  }
});

button {
  height: 80px;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="buttonName">

How it works.

The question you asked is an interesting one. I've used jquery. A library of javascript that makes most functions alot easier.

First. It doesn't actually matter (to much) where your script sits. some people place it in the head if its IMPORTANT And reaaaaly needs to be run at the very beginning.

However for the most part you can put javascript before the closing body tag. This is something google, for SEO, approves of.

$(document).ready(function() The function here is called once the page is ready. Or does it? You'll be surprised to know that as a matter of fact its harder for you to stop the script loading before the page is fully loaded. :)

When the browser encounters a script tag when parsing the HTML, it stops parsing and gets to work on the javascript interpreter, which then ends up running the script. The html wont continue until the script execution is complete just incase you have a 'document.ready' function somewhere. This is the default behavior.

As you've written the rest ill assume you already understand what the rest of the code does.

onclick requires a separate function. But as i stated the script will be loaded much before the page is fully loaded. So you can have the onclick work before. However as the button wouldn't have loaded yet there's nothing for you to click.

Another way of approaching the problem.

    function test() {
     console.log("testingtesting");
    }

button {
  height: 80px;
  width: 80px;
}

<button id="buttonName" onclick="test()"/>

Unlike your script document.getElementById("buttonName").onclick = test; This function is called in the DOM here <button id="buttonName" onclick="test()"/> thus not requiring another line for the onclick.

Further reading

https://api.jquery.com/

https://www.innoq.com/en/blog/loading-javascript/

http://www.bardev.com/2013/01/03/browser-script-loading/

very thorough, thankyou! I had seen responses using jquery but I want to keep my layout as lean as possible because the content itself is quite bulky so I'm not using jquery. I should have specified that I was looking for a pure js solution. Someone else also suggested adding onclick into the button tag itself and that has very successfully worked — Josh McGee, Dec 11 '18 at 09:26
No problem :). I added the javascript version just to be safe. Jquery is a nice library though. I was unaware someone had already answered your question. I like to explain why I've done something though. Not a fan of just "Heres code. It works. Deal with it." — Scott Chambers, Dec 11 '18 at 11:21

How to trigger onclick before page is fully loaded

2 Answers2