How to detect clicks on specific links in page wit

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.)