Step 3



<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
Taking into account Bug Boy’s nice work posted of Oct 23rd.

Would the following snippet satisfy this step’s expectations too or more to the point, is it an example of what folks in the industry would appreciate as the solution?


var main = function() {
('#top-text').keyup(function(){ (’.top-caption’).text() = $(’#top-text’).val();


<do not remove the three backticks above>


The event object is the element in context of the handler, so $(this) is that object.

= $(this).val();

I expect this is more common than the naming of the object as in your code.


I may have used the .text() method in error above. My snippet should have read:

var main = function() {
("#top-text").keyup(function(){ (".top-caption").text($("#top-text").val());

or as mtf suggests:

var main = function() {
("#top-text").keyup(function(){ (".top-caption").text($(this).val());

Are these acceptable? Or, is it better to utilize the variable Top as Bug Boy did?


Now we’re getting somewhere. This is perfectly legitimate, though some might suggest a variable would be easier to read and see.

var main = function() {
    var text;
    $("#top-text").keyup(function () {
        text = $(this).val();


So both forms execute, understood.

However it’s easier for other folks, or even ourselves, to perform maintenance tasks on our code in the future if the variable is used.

Ok, thanks. That’s what I was seeking clarification on.


If by ‘the variable’ you mean this, then yes. Big boost to maintainability, and portability, when we think of it.

Something else to consider is delegation. That’s when we really see the power of context orientation.


Oh, by ‘variable’ I meant where we assigned the value of the #top-text input field to the variable Top via the val() method call.

Delegation? I’m not familiar with that term, will have to look it up.

side note one: Also intrigued by the terms portability and context orientation, though I feel reasonably assured as to their meaning based on their context.

side note two: Finally combining the techniques learned in the JavaScript course with the jQuery course in this project caused me some consternation having not seeing the two combined before. So that’s more feedback on how the lessons are structured. That said however, I’m getting the feel for it in this lesson.


$(this) is portable. #top-text is not.

Delegation is when we attach a listener to a parent element. This allows the content of that element to be dynamically inserted and removed, and each element gets all the listeners that are attached to the parent.


Study the term, event bubbling.


Ok, will look up the new terms.

Hope these jQuery projects stay available for a while longer. Just read that they’re slated to be removed in Q4 of 2016. I’m still slugging my way through them and finding them useful/helpful/interesting.


You’ll see delegation in use when you get to removing things from the toAdd list. Actually, you must have covered this already. Maybe go back and review the Events module.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.