Question

I’m working on an application for image uploading, where users can grade the images.

When three users has given scores to the image the html looks like the code below, and what I want to do is to generate arithmetic average values from the different parameters (composition, content, technique) and show them to the users.

I guess I need to do the following (when the page is loaded):

1. Get the values from the different span tags and add them to different variables (composition, content and technique)
2. Divide the values from the variables with the number of score posts
3. Append the values to the page

What I need help with is to find out when the page has loaded, and how to get the values from the different span tags.

Thanks in advance!

    <div id="scores">
        <strong>User1</strong>
        <span class="composition">1</span>
        <span class="content">2</span>
        <span class="technique">3</span>

        <strong>User2</strong>
        <span class="composition">1</span>
        <span class="content">3</span>
        <span class="technique">4</span>

        <strong>User3</strong>  
        <span class="composition">4</span>
        <span class="content">5</span>
        <span class="technique">4</span>
    </div>

Answer 1

Try this:

function calc(calcValue){
    var result = 0, count = 0;
    var selector = "." + calcValue;
    jQuery(selector).each(function(){ 
         var strValue = jQuery(this).text();
         result += parseInt(strValue);
         count++;
    });
    return result / count;
}

var composition = calc("composition");
var content = calc("content");
var technique = calc("technique");

alert("composition = " + composition);
alert("content = " + content);
alert("technique = " + technique);