JavaScript/jQuery: How to make a task list with a running point value

Question

I'm not sure how best to describe my problem in a single title, so I hope that makes a little bit of sense.

Let me explain what I'm trying to do. I want to create a task list widget. Users write a description of the task in one <input> field, and then select a point value for that task from a <select>. Upon clicking a "Submit!" button, a new item is added to an unordered list below with jQuery, containing both the task description and the point value. When users click on an item in the list, it is removed, and its associated point value is added (dynamically, using jQuery again) to a total score, which is displayed in a <div> that's fixed to the corner.

I'm not having any problem making the form or adding items to the list. What's stumping me, however, is how to add the point value when a task is clicked.

I feel like this is something where a Task object, with parameters "name" and "pointValue" could be useful, but I can't exactly figure out how. I can make the object, sure, but how do I somehow associate it with the HTML that's added to the page so that when it's clicked, it adds its point value to the total? Or is this entirely the wrong way to go about it?

You can see my current progress here. Like I said, I can figure out how to make most things work--just not the points system.

Any and all help would be appreciated. I'm new to jQuery and JavaScript, so try not to rain too much fire down upon me if I'm making dumb mistakes. ;)

Thanks.

Answer 1

See this: http://jsfiddle.net/8L25m/9/

 $(document).on('click', '.task', function () {
    $(this).hide('fast', function () {
        $this.remove();
    });
    $("#score").html(parseInt($("#score").html(),10) + parseInt($(this).find(".taskValue").html(),10));

});

Answer 2

Another good one can be found at jsfiddle: http://jsfiddle.net/RWhitbeck/ZyYFG/

the js (from source above):

$(document).ready(function () {
    $('#button').click(function () {
        //save inputs as variables:
        var taskName = $('input[name=newTaskName]').val();
        var pointWorth = $('select[name=newTaskPoints]').val();

        //add a new list item for the task (and do it with spiffy animation)
        $('<li class="task"><div class="taskOuter"><div class="taskValue">+' + pointWorth + '</div><div class="taskDescription">' + taskName + '</div></div></li>')
            .hide().prependTo('#taskList').slideDown('fast');
    });

    //remove item (with spiffy animation) when clicked:
    $(document).on('click', '.task', function () {
        $(this).hide('fast', function () {
            $this.remove();
        });
        $("#score").html(parseInt($("#score").html(),10) + parseInt($(this).find(".taskValue").html(),10));
        //adding points happens somewhere in here but I'm completely baffled
    });
});

• Has Projects (drop-down regions)
• Projects have tasks, with checkboxes