Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

I dont understand fully what this is doing. Please explain

$(document).ready(function(){ $(document).on('click','item', function() { $(this).remove(); $('#button').click(function(){ var toAdd= $('input[name=checkListItem]').val(); $('.list').append('<div class='item>' + toAdd +'</div>'); }); })'

2 Answers

Samuel Webb
Samuel Webb
25,370 Points

I went through and commented each line to the best of my abilities so you could see exactly what's going on. There was a single quote mark in the append() function which was an issue and you didn't have the final closing }); or whatever that's called. I didn't test the code to see if it actually does what it's supposed to, but at least you now know what each line means.

Also, that append() function is doing nothing useful in this code. Inside the parenthesis is where you would put what you want to append to elements with the "list" class.

$(document).ready(function(){  /* Waits until page is fully loaded to start what this function contains */

    $(document).on('click','item', function() { /* When document is clicked, do function on 'item' */

        $(this).remove();  /* Remove 'item' from the page */

        $('#button').click(function(){ /* When the element with the ID of "button" is clicked */

            var toAdd= $('input[name=checkListItem]').val(); /* Create variable "toAdd" with the value of the input field with the name "checkListItem" */

            $('.list').append(); /* Append nothing to the element with the class "list" */

        }); /* Closes button click function */

    }); /* Closes item click function */

}); /* Closes ready function (wasn't originally in code) */

I understand. I get what was confusing me. Inside of append('<p>' + toAdd +'</p>'). I understand that now that what ever was in the class 'list' had to put in the value of input which was the variable toAdd, at the end of the element .list.

Samuel Webb
Samuel Webb
25,370 Points

Sweet man! Glad you got it.