javascript - How do I get Greasemonkey to click on a button that only appears after a delay?

Question

I've seen a lot of similar questions and I've tried everything I can think of to get this to work on my own.

First the relevant code (?from the target page?):

document.getElementById('btn_submit').innerHTML =
 '<input type="hidden" value="17271" name="idofclick">
  <input type="submit" value=" Click Me Now! " name="submit_com" class="padding2">';

Basically there is a timer on the page and the "click me now!" button appears after 3 secs, that's the part I want to click on.

This is my code. It's not working:

// ==UserScript==
// @name        abc
// @namespace   something
// @description abc Scripty
// @include     *
// @version     1
// ==/UserScript==
(function ClicktheButton(obj) {
   var evt = document.createEvent("MouseEvents");
   evt.initMouseEvent("click", true, true, window,
   0, 0, 0, 0, 0, false, false, false, false, 0, null);
   var canceled = !obj.dispatchEvent(evt);
   /*

  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
  */
}

var StupidButton = document.querySelector.innerHTML('input[type="submit"][value=" Click Me Now! "]');
ClicktheButton(StupidButton);

Answer 1

That code has errors. Use Firefox's error console (CtrlShiftJ) to see them. Using jslint to check your code, can be helpful too.

Anyway, this is a common Greasemonkey problem. Use the waitForKeyElements() utility to handle the delayed appearance of that button. Use jQuery to simplify the code (and make it more robust and portable).

So your script would become:

// ==UserScript==
// @name     _YOUR_NAME
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

function clickSubmitBtnWhenItAppears (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}

//-- Value match is case-sensitive
waitForKeyElements (
    //"#btn_submit input[type='submit'][value*='Click Me Now']",
    "input[type='submit'][value*='Click Me Now']",
    clickSubmitBtnWhenItAppears
);