Greasy Fork

Help? Code issue....

Basically I want to be able to go through the slideshows automatically....

I have it wait for 31 seconds after page load (timer per page is 30 seconds)

and then click the NEXT when it pops up

This is the class I look for when I go to click: (ui-arrow-right)

<a data-href="/list/25-fabulous-castles-you-have-to-see-to-believe/4" class="btn btn-lg btn-color" style="color:#fff" href="/list/\*/\*">
  <span>Next</span><i class="ui-arrow-right" style="margin-left:10px"></i>
</a>

Heres the code I did:

// ==UserScript==
// @name MySlideShow
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.myfavoritecontent.com/list/*/*
// ==/UserScript==

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds) {
      break;
    }
  }
}

window.addEventListener('load', function() {
  sleep(31000);
  document.getElementsByClassName("ui-arrow-right")[0].click();
}, false);

What did I do wrong?

Also, is there a way to make it wait till it see's the "Next" button then click it? instead of Page load and THEN wait 31 seconds?

You can simply use setTimeout:

setTimeout(() => {
  document.getElementsByClassName("ui-arrow-right")[0].click();
}, 31000);

Or detect the exact moment with MutationObserver:

const arrows = document.getElementsByClassName('ui-arrow-right');
new MutationObserver((mutations, observer) => {
  const arrow = arrows[0];
  if (arrow) {
    observer.disconnect();
    arrow.click();
  }
}).observe(document, {subtree: true, childList: true});

I'm using getElementsByClassName here instead of checking every mutation because it's a super-fast live collection that gets updated whenever we access it.