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 Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

jQuerry

Hey Guys !

I just cant really understand the exact use of the 'toggle()' function, I dt know how to manipulate it, any help would be much appreciated !

4 Answers

Samuel Webb
Samuel Webb
25,370 Points

It took me a ton if fiddling around but I was able to figure out what the issue was. toggle() will not help you with this, but it's a simple fix. This is the problem line:

$labeltext.replaceWith($newlab);

The problem is that the .replaceWith() function removes the entire node and replaces it with something new. By using that, you're actually replacing the entire html structure of the label with just the value from the text box. Meaning the label tags are now gone and you can't target them anymore. Instead of using .replaceWith() you want to be using html(). It's the jQuery version of .innerHTML() which basically changes only the value between the html tags. The previous line should instead look like this and it will work:

$labeltext.html($newlab);
Samuel Webb
Samuel Webb
25,370 Points

Also, if you're really set on using the .replaceWith() function, you can use it like this:

$labeltext.replaceWith("<label>" + $newlab + "</label>");

You have to put those label tags since it's completely replacing that entire node.

Both ways work perfectly fine.

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

With the toggle function, you can basically set 2 different handlers (functions to be performed) that will be executed 1 after another. For example, you can make a button that the first time you click, it shows a popup. The second time it shows a different popup. The third time, it shows the first popup again. And so on. Something like this:

$( "#target" ).toggle(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

For more information, check out the documentation at this jQuery page.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

thanks Samuel Webb, I have this code, that once I click on the edit button, it changes the label text to what is written in the inputtext, it works, the first time, but if I rechange the inputtext value and click on edit, it doesnt work anymore , would it work with toggle, to make it work again & again & again ..

My code :

JavasScript : 

$(".edit").click( function() {


  $checkvalue = $(this).parent().children("input[type='checkbox']");


  if ($checkvalue.is(":checked") == true)
      {
          $labeltext = $(this).parent().children('label');

        //  var $label = $(this).parent().children('label').text();
       //alert($labeltext.text());
       $newlab = $(this).parent().children("input[type=text]").val();//attr("value");

       $labeltext.replaceWith($newlab);
      }
});

HTML :

 <ul id="incomplete-tasks">
<li>
          <input type="checkbox"><label>Pay Bills</label>
          <input type="text" id="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
</li>
</ul>
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

Great !! Thanks for your hint, I actually thought it was the opposite, that its the html method that change the entire code to just text.

thanks Samuel Webb

Samuel Webb
Samuel Webb
25,370 Points

No problem. Glad I could help. I'd never actually used the .replaceWith() function before so thanks for asking this question and prompting me to learn something new.