How to get information from an element on a website?

Question

here's the problem:

<h2><b>Progress: </b> <font color="87edff">3 / 5</font> <b>Clicks</b></h2>

I want to make a script in PHP or Javascript to check the first number (3 in this case) and if it's larger than a certain number (5 for example), to do something such as show hidden text, open a link, etc.

Does anyone know how this can (or if it can't) be done? I thought of using POST + GET variables but failed with no success.

Answer 1

Use regex to get the 3/5 and then split on the / after that just compare it from within the array.

You could also as another route, name the element that contains the 3/5 and with jquery get that value. Then you would do the same, split the string on the / and compare it.

POST/GET is only available when submitting a form or sending data to a script on the serer. These are mainly used for textarea and inputs

Answer 2

If you're already using jquery, some fancy jquery selectors will do it:

http://jsfiddle.net/qPPsH/1/

findThings = function(){
    // select the first <b> elements that contain "Clicks", AND
    // has a sibling before it that is a <font>, AND
    // has a sibling THAT has both an <h2> as a parent, and contains the text "Progress".

    var firstnumber = -1;  // some number that doesn't make sense
    var secondnumber = -1;

    $('h2 > b:contains("Progress:") + font + b:contains("Clicks"):first').each(
        function(){
            //alert("Element is:",this);
            //alert("Element contains:" + $(this).text());

            // "this" is the <b> that contains "Clicks". Find the first sibling that is a <font> and grab the text from it.
            text = $(this).siblings("font:first").text();
            //alert(text);

            numbers = text.split("/"); //split the text by "/" character.

            if (numbers.length == 2){ // make sure there are two numbers!
              firstnumber = numbers[0];
              secondnumber = numbers[1];
            }
        }
    );

    alert("First number:" + firstnumber);
    alert("Second number:" + secondnumber);

    var whatever = 5;
    if(firstnumber >= whatever){
        alert("YOU WIN!");
    }else{
        alert("You Lose!");
    }
}

But this only works if the code is placed on the same site. If it's on the same site, then this is a horrible idea anyways since you could just stick an id on the element and access the value by id. Still, shows how cool selectors can be.