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

Posted by Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Make label = input text

I have one more problem. I want that when I click "edit" the input field would already have the "label" value. It works only on "Go Shopping" task.... other task (and new) do not work.

What am I doing wrong?

<ul id="incomplete-tasks">
        <li>
          <input type="checkbox"><label>Pay Bills</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
</li>

//Add new TASK
 $('#addButton').click(function(){
 $("#incomplete-tasks").append('<li><input type="checkbox"><label>' + $('#new-task').val() + '</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>')
 });

 //Show edit mode
 $("#incomplete-tasks").on("click", ".edit", function() {

 //show
 $(this).parent().toggleClass('editMode');

 //THIS PART DOESNT WORK - It should make "label" value = "input" text
 var $label = $(this).children().find('label').text();
 $(this).children().find('input[type=text]').val($label);
 });

 //Save changes when "edit"is clicked again 
 $("body").on("click", ".edit", function() {
 var value = $(this).parent().find('input[type=text]').val();
 $(this).parent().find('label').text(value);
 });

 //delete task 
 $("body").on("click", ".delete", function() {
 $(this).parent().hide();
 });

FULL SCRIPT - http://codepen.io/tsalexey544/pen/LEqbpV?editors=101

1 Answer

Vance Rivera
Vance Rivera
18,323 Points
Vance Rivera
Vance Rivera
18,323 Points 
 //Add new TASK
 $('#addButton').click(function(){
 $("#incomplete-tasks").append('<li><input type="checkbox"><label>' + $('#new-task').val() + '</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>')
 });

 //Show edit mode
 $("#incomplete-tasks").on("click", ".edit", function() {

 //show
 $(this).parent().toggleClass('editMode');

/*You were not targeting the right element as $(this) === button.edit therefore you have to traverse the elements by using 
siblings(). A good way to test out your javascript is to use the built in javascript console in your browser to see the value of 
$(this) simply create a global variable and in your .edit click event assign $(this) to the variable or log $(this) to the console. 
Good practice for debugging.*/

  var $label = $(this).siblings('label').text();
 $(this).siblings('input[type=text]').val($label);
 });

 //Save changes when "edit"is clicked again 
 $("body").on("click", ".edit", function() {
 var value = $(this).parent().find('input[type=text]').val();
 $(this).parent().find('label').text(value);
 });

 //delete task 
 $("body").on("click", ".delete", function() {
 $(this).parent().hide();
 });

Read the comment above. You were almost there. Hope this helps.

Ben Junya
Ben Junya
12,365 Points

Bam! Perfect answer and great suggestion. The developer's js console is your best friend in debugging.