Javascript code works in console, but when loaded as actual userscript functions are not defined

Question

Please keep in mind that I don't know javascript. I've put this together from hours of reading and a question here and there. I'm not a programmer and only know a bit of HTML and CSS.

I'm trying to create a userscript that clicks a specified button on a page at intervals until a certain condition is met, then stop the loop and press another button. Thanks to some help here I got a chunk of code that does exactly what I want it to do when pasted into the Chrome or Firebug console.

However, if I install this script as a Chrome extension or Greasemonkey script, I get undefined errors.

var int = self.setInterval ("refresh ()", 4000);

function stop () { 
    // Stop the loop before joining server
    int = window.clearInterval (int)
}

function join () { 
    // Click Join Server button
    document.getElementsByClassName (
        "base-button-arrow-almost-gigantic"
    )[0].click ();
}

function refresh () { 
    // If current players < max, cancel loop and join server
    var playersElement = document.getElementById ('server-info-players');
    var players = playersElement.textContent;
    var parts = players.split ("/");

    var current = parseFloat (parts[0]);
    var max = parseFloat (parts[1]);

    if (current < max) {
        stop ()
        join ()
    }

    var refreshBtn = document.querySelector (
        "div.serverguide-header-refresh-button div[type='reset'] a"
    );
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    refreshBtn.dispatchEvent (clickEvent);
}

If this is pasted directly into the console it works as intended, hitting the refresh button until the condition is met then pressing the Join button. Installed as a userscript I get the follow error from both Chrome and Firebug:

Uncaught ReferenceError: refresh is not defined
(anonymous function)

This just keep being returned on four second intervals.

Is there something about userscripts that I don't know? What am I doing wrong?

Answer 1

Notes:

1. People are more likely read your code if it's indented and formatted for legibility. ;-)   See the edit I made to your question, and there are plenty of tools that help with formatting.

2. Re: setInterval("refresh()"...; do not call setInterval (and similar functions) with quoted code like that. It's always poor form (uses eval() unnecessarily) and it flat-out won't work in Greasemonkey due to the sandbox.

3. Likewise, sometimes JS that is used before it is defined will be "not defined" -- especially in eval situations.

4. Do not use ambiguous, common, or reserved words as variable or function names. int is especially bad as most will read it as "Integer" and it is a reserved word in almost every mainstream language.

5. Be careful with the self and window objects. These have different meanings/behaviors in a Greasemonkey context.

6. Semicolons are not always required in javascript, true, but get into the habit of always using them. It will save you grief in the future and makes the code slightly easier to understand.

Anyway, if the code worked from the console, then this should also work from a script:

var refreshInterval;

function stopRefreshTimer () { 
    // Stop the loop before joining server
    clearInterval (refreshInterval);
}

function joinServer () { 
    // Click Join Server button
    document.getElementsByClassName (
        "base-button-arrow-almost-gigantic"
    )[0].click ();
}

function refreshUntilJoiningServer () { 
    // If current players < max, cancel loop and join server
    var playersElement  = document.getElementById ('server-info-players');
    var players         = playersElement.textContent;
    var parts           = players.split ("/");

    var current         = parseFloat (parts[0]);
    var max             = parseFloat (parts[1]);

    if (current < max) {
        stopRefreshTimer ();
        joinServer ();
    }

    var refreshBtn      = document.querySelector (
        "div.serverguide-header-refresh-button div[type='reset'] a"
    );
    var clickEvent      = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    refreshBtn.dispatchEvent (clickEvent);
}

refreshInterval         = setInterval (refreshUntilJoiningServer, 4000);