trigger a button after clicking another button from another page with javascript or jquery

I have 3 buttons on the “home.php” page, and when I make click in any of them, these 3 buttons redirect to a same page (“create.php” page) but each one of them automatically triggers its corresponding button in the new redirected page (“create.php” page)

e.g => button 1 (id="buttonHome1") from home.php page redirects to create.php page and triggers the button 1 (id="buttonCreate1") that is in create.php page

Button 1

<a href="create?car=1">
<button id="buttonHome1">Button 1</button>
</a>

Button 2

<a href="create?bike=1">
    <button id="buttonHome2">Button 2</button>
</a>

Button 3

<a href="create?bike=1">
<button id="buttonHome3">Button 3</button>
</a>

In my .js file I got this

var url = window.location.href;
 
window.onload = function () {
    var link = url.split("?car=");
    if (link.length > 1) {
        $("#buttonCreate1").click();
    }
}

This javascript (jquery) code is running fine, but just for one button, what I mean is: I f I use the same window.onload function for the button2 , run ok but override the first button, the same happens if is used for third button, overrides the other 2 buttons

I would like all buttons working but I don't know at the moment how to handle this.

I tried also with

$("#buttonHome1").click(function(){
    $("buttonCreate1").click(); 
    return false;
});

Solution 1:

Have you tried addEventListener?

You can have multiple listeners like that

window.addEventListener('load', function(){
  // Do your stuff here
});

window.addEventListener('load', function(){
  // Another one
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event