Hello I have a wordpress page that im trying to make it so that when someone hits my page with the #click_approved parameter on the url- it triggers a link with data-video attribute to open a modal. So far i drafted this JS but no luck
<script>
if(document.URL.indexOf("#click_approved") >= 0) {
document.querySelector('[data-video-id="5MS_V0SpRL8"]').click();
}
</script>
also tried this
<script>
var element = document.querySelector("a[data-video-id='5MS_V0SpRL8']");
if(document.URL.indexOf('#click_approved') >= 0) {
setTimeout(function(){element.click();}, 5000);
}
</script>
this is the page I'm trying to get the function to work on
https://www.homecarepulse.com/home-care-tv/recruitment-retention/#click_approved
any help is appreciated!
You could just move querySelector into the setTimeout callback function.
<script>
if(document.URL.indexOf('#click_approved') >= 0) {
setTimeout(function(){
var element = document.querySelector("a[data-video-id='5MS_V0SpRL8']");
element.click();
}, 5000);
}
</script>
or reduce wait time using a setInterval
<script>
(function() {
if (document.URL.indexOf('#click_approved') === -1) return;
let tm = setInterval(function(){
var a = document.querySelector("a[data-video-id='5MS_V0SpRL8']");
if (a) {
clearInterval(tm);
a.click();
}
}, 500);
})();
</script>
and here is another way using MutationObserver API, it's more efficient than the timer way. it ensures that click event can be triggered immediately once the element is rendered.
<script>
(function() {
if (document.URL.indexOf('#click_approved') === -1) return;
let observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (!mutation.addedNodes) return
for (let node of mutation.addedNodes) {
if (node.tagName == 'A' && node.getAttribute('data-video-id') == '5MS_V0SpRL8') {
node.click();
observer.disconnect();
}
}
});
});
observer.observe(document.body, {
childList: true
, subtree: true
, attributes: false
, characterData: false
});
})();
</script>