How to detect clicks on specific links in page with Greasemonkey?

Question

Ok... one of my virtual pet sites was down so I decided to tweak a Greasemonkey script for another site... the original script just pops up an alert when you find an egg so you don't click past it - I thought it would be simple to count how many eggs I came across. After 2 hours I finally found a way to keep a variable past page reloads - SUCCESS!! Then I decided I wanted to keep track of how many "steps" I was taking... ARGGGG!!!! Should be simple but isn't!
On the page there are three possible explore links to click (shows image not link). 3 hours later I found the event listener and can make an alert popup when I click anywhere on the page, but how do I check for clicks only on 1 of those 3 links? All 3 links have the same general format: http://unicreatures.com/explore.php?area=***&id=***&key=**** where the * are changeable.

Target page http://unicreatures.com/explore.php?area=grassland should be accessible without an account, if not let me know and I'll grab the source code.

// ==UserScript==
// @name Unicreatures Egg pop-up
// @namespace Unicreatures Egg pop-up
// @description Unicreatures Egg pop-up
// @include http://unicreatures.com/explore.php*
// @include http://www.unicreatures.com/explore.php*
// ==/UserScript==

var y = document.body.innerHTML;

//document.addEventListener('click', function(){alert('page clicked')}, true);

if(y.indexOf("You find a Noble")> 0)
{
alert('Noble Egg Alert');
}

if(y.indexOf("You find an Exalted")> 0)
{
localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1;
alert('Exalted Egg Alert '+localStorage.exaltedEggCount);
}

if(y.indexOf("egg nearby!")> 0)
{
localStorage.eggCount=Number(localStorage.eggCount)+1;

alert('Egg Alert '+localStorage.eggCount);
}

I do realize that the way the if statements are written that I get double alerts if either of the first 2 trigger(I didn't write that part, just made the alerts unique)... I'm fine with that for now. I did read something about get element id or something but I couldn't find it explained anywhere good enough for me to "get".
Please javascript only, no jquery... I'm still barely getting javascript at the moment... please explain answers so I understand how something works - I don't just want code snippets that leave me coming back with a similar question because I don't understand why a bit of code was used.

And one other question unless I should open another question for it... when you find an egg the text says You find an Exalted *** egg nearby or You find a *** egg nearby . Is there a way to grab the *** part from the page?

Thanks!

Answer 1

You can add event handlers to specific elements on a page. If the element has an id attribute, this is easy:

var element = document.getElementById( 'whatever' );

element.addEventListener( 'click', function () {
    alert( 'element clicked' );
}, true );

This will add the event listener to the element with the ID "whatever".

If the element doesn't have an ID attribute, you'll need to be a bit more creative. Here's one way to do it:

var links = document.getElementsByTagName( 'a' );

for ( var i = 0; i < links.length; i++ ) {
    var link = links[i];
    if ( /area=grassland/.test( link.href ) ) {
        link.addEventListener( 'click', function () {
             alert( 'grassland link clicked' );
        }, true );
    }
}

The /area=grassland/ is a regexp which matches strings that contain "area=grassland" as a substring. (You can do a lot more with regexps if you want.) We test it against every link ( a element) on the page, and add the click handler to those whose href attribute matches the regexp.

By the want, you can get the text inside a link with link.textContent , if you'd prefer to match against that. It won't work so well with image links, though. (But you could always find, say, the first image tag inside the link with link.getElementsByTagName( 'img' )[0] and work from there.)

---

As for your second question, regexps are your friend there too:

var regexp = /You find an? (Exalted )?(.*?) egg nearby/;
var match = regexp.exec( document.body.textContent );
if ( match ) {
    if ( match[1] ) {
        alert( "Exalted egg found: " + match[2] );
    } else {
        alert( "Normal egg found: " + match[2] );
    }
}

See the links I gave above for how that regexp works and how to modify it to better suit your needs.

(Ps. Warning: I didn't actually test any of the code above, as I didn't feel like creating a trial account on the game site just for that. I hope it's correct, but there might be bugs or typos in it.)