Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Build an Interactive Form

Posted by Mikael Fredriksson
Mikael Fredriksson
6,876 Points

Problem displaying total cost

I am trying to display the total cost of the selected activities but I can't manage to get the selected checkbox/label. I was thinking of using "$(this).parent().text()" to get the parent (the label) of the selected checkbox, then see if "$100" could be found in it, but I never managed to select the parent (the label) from the start.

If it's needed I can upload the whole project to Github and share the link in the comments.

$(".activities input").click( () => {
    if ( $("#total").length <= 0 ) {
        var span = createInput('span', 'total');
        $(".activities").append(span);
    }

    var str = $(this).parent().text();
    console.log(str);
    if ( str.indexOf("$100") >= 0) {
        total += 100;
        $("#total").html("Total: $" + total);
    }
});

1 Answer

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

Arrow functions don't work exactly like conventional functions.

The important difference here is that they don't set "this". You can still use one for an event handler, but pass in the event object and use the target property on it instead.

$(".activities input").click( e => {
    /* ... */
    var str = $(e.target).parent().text();

See this MDN page for a more complete discussion of how arrow functions are different.