Click button if the URL matches with JS

Question

There's a "Book Now" tab on a website. when you click it, it opens a form. I need to make the button open automatically if the URL is www.example.com/en/?emailer. I tried this:

if (window.location.href == "http://www.example/en/?emailer") {
  document.getElementsByClassName("tab")[0].click();
}

The thing is that if I paste this code on the page in the console, it works. However when I added it to the header.php WordPress file, it's not working.

Any idea why it works in the console and not in the <head>? Can someone tell me how can I get this done?

Note: the tab has the class 'tab' as seen in the code section.

`when I added it to the header.php WordPress file, it's not working.` It sounds like you're executing this logic too early; ie. before the DOM is fully loaded. I'd suggest placing this just before the `
` tag, or in a document `load` event handler — Rory McCrossan, Aug 09 '18 at 07:53
it would be more easy i think with document.ready() function in jquery. \ — AlexiAmni, Aug 09 '18 at 07:57
@AlexiAmni Just wrap it in a `(function(){ xyz })()` or `DOMContentLoader` listener. https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery — DarkMatterMatt, Aug 09 '18 at 07:59
@MarkBaijens yes yes I know but in case there's a jquery fix. that would work too — , Aug 09 '18 at 08:01
@RoryMcCrossan so I added it to the footer.php file and it's still not working :/ — , Aug 09 '18 at 09:35

score 1 · Accepted Answer · answered Aug 09 '18 at 09:53

1

Try this

jQuery(document).ready(function( $ ) {
    if (window.location.href == "http://www.example/en/?emailer") {
        document.getElementsByClassName("tab")[0].click();
    }
});

answered Aug 09 '18 at 09:53

Jaspreet Singh

379
2
8

It should work in header as well as end of body before `
` tag. If it doesn't work try checking the console of the browser for javascript errors.
– Jaspreet Singh Aug 09 '18 at 09:59
also you need to add this code in `` tag if you are adding it in html – Jaspreet Singh Aug 09 '18 at 10:02

score 0 · Answer 2 · answered Aug 09 '18 at 08:11

0

You should use onreadystatechange for that

$(document).on('readystatechange', function() {
    if (window.location.href == "http://www.example/en/?emailer") {
        document.getElementsByClassName("tab")[0].click();
    }
});

answered Aug 09 '18 at 08:11

Leo Odishvili

800
5
22

So I tried that and for some reason all the other scripts on the page stopped working :/ I added it to the header – Aug 09 '18 at 09:33

score -1 · Answer 3 · answered Aug 09 '18 at 08:08

-1

The issue is, in fact, that the DOM tree is not fully built by the time your script is being executed. A quick fix would be a simple

setTimeout(function () {
    if (window.location.href == "http://www.example/en/?emailer") {
        document.getElementsByClassName("tab")[0].click();
    }
}, 0);

Like that, you await the next tick in the event loop, by when the DOM tree is setup.

answered Aug 09 '18 at 08:08

fjc

4,247
12
30

1

I don't think setTimeout is good practice in 2018, where you have special events for catching this type of problems – Leo Odishvili Aug 09 '18 at 08:12
So I tried that and for some reason all the other scripts on the page stopped working :/ I added it to the header – Aug 09 '18 at 09:33

Click button if the URL matches with JS

3 Answers3