Autoclick links on webpage for display

Question

I have a webpage with 7 links that I want to be able to set to auto click through automatically then repeat forever on toggle with a 60 second delay between clicks. I'd like to set a button to toggle this on/off. When toggled on, the webpage would perform the click action, when toggled off, the webpage would behave normally. The idea is to have this feature for display purposes (displaying our various metrics, etc).

I found this link which describes using setInterval: Calling a function every 60 seconds

And this one that describes clicking a link programmatically: How do I programmatically click a link with javascript? , but haven't been able to find any examples of these two methods combined.

Tried:

function click_links(){
    $("safety").trigger("click");
}

window.setInterval(function(){

      click_links();
}, 2000);

And called with:

onclick="click_links();"

But, so far, can't even trigger a click event.

ATTEMPT 2: I'm close with this:

function links() {
safety
daily
monday
tuesday
}

var intervalId;
function toggleIntervalb() {

  if (!intervalId) {
    intervalId = setTimeout(links, 5000); 
  } else {
    clearInterval(intervalId);
    intervalId = null;
  }
}

function safety(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'block';
document.getElementById("daily").style.display = 'none';
document.getElementById("monday").style.display = 'none';
document.getElementById("tuesday").style.display = 'none';

}
function daily(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'none';
document.getElementById("daily").style.display = 'block';
document.getElementById("monday").style.display = 'none';
document.getElementById("tuesday").style.display = 'none';

}
function monday(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'none';
document.getElementById("daily").style.display = 'none';
document.getElementById("monday").style.display = 'block';
document.getElementById("tuesday").style.display = 'none';

function tuesday(){
document.getElementById("fires").style.display = 'none';
document.getElementById("safety").style.display = 'none';
document.getElementById("daily").style.display = 'none';
document.getElementById("monday").style.display = 'none';
document.getElementById("tuesday").style.display = 'block';

But, after 5 seconds, it only just executes the last function in the set (tuesday) and does not iterate through them with a delay between each.

This is possible but I would suggest you try it yourself and come back with some attempts to get the best response from this community. — rjustin, Sep 27 '17 at 18:30

Daniel Beck · Answer 1 · 2017-09-27T19:30:01.043

0

The answers in How do I programmatically click a link with javascript? are no longer accurate; nowadays script-initiated click events just fire the event, they do not cause the browser to actually follow the links:

Note: manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.

That documentation is for keyboard events, but the same applies to click events, as demonstrated here:

$('#foo').on("click", function() {
 console.log("Click event fired");
});

$('#test').on("click",function() {
  $('#foo').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   This will work: <a id="foo" href="https://example.com">Example link</a><br>

   This will fire the event but not follow the link: <button id="test">Trigger "click" event on link</button>

Instead, you would need to read each link's href and redirect:

$('#test').on("click",function() {
  var url = $('#foo').attr("href");
  window.location = url;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="foo" href="https://example.com">Example link</a><br>

<button id="test">Redirect to HREF from link</button>

(For the looping behavior you want, of course, you'd need to target those links into an iframe or separate window; otherwise your code would stop running as soon as the user is redirected to that first link.)

edited Sep 27 '17 at 19:30

answered Sep 27 '17 at 19:19

Daniel Beck

20,653
5
38
53

In case it matters, the links being clicked exist in a side panel that never leaves the screen. The URLs open in the main panel. Would the script still stop running in that case? – user3108489 Sep 27 '17 at 19:24
Assuming that both panels are iframes, and the script isn't inside the frame where the navigation is occurring, then the script would keep running. – Daniel Beck Sep 27 '17 at 19:27
So, perhaps programmatically clicking the links is not the right approach. When I manually click a link, it's really just performing this type of action: document.getElementById("link1").style.display = 'block'; document.getElementById("link2").style.display = 'none';. So maybe creating a delayed loop that simply sets each variation of this would do the trick. – user3108489 Sep 27 '17 at 19:33
Ah, I see; that's completely different then, you're not dealing with links at all here. Those *should* work based on programmatically firing the click event on the link, since it's not the default browser action they don't fall under the security restrictions on manually dispatched events; they're just custom click handlers, like my "click event fired" function above. – Daniel Beck Sep 27 '17 at 19:37
(That said, a loop that simply sets the visibility of the divs directly would probably be a lot easier than firing click events.) – Daniel Beck Sep 27 '17 at 19:40
Updated OP with latest attempt...stuck on iteration. – user3108489 Sep 27 '17 at 21:39

Autoclick links on webpage for display

1 Answers1