I think 1.12 might be broken? It says my code is correct but it's not working


#1

Hey, I'm having an issue with section 1.12. It's supposed to be teaching me how to make a pulldown menu using jQuery, and it says my code is right and is allowing me to go onto the next section, but the code doesn't appear to be doing what the lesson says it should be doing (which is make the div with class .panel act as a pulldown menu). Here is my code (which it says is correct)...

$(document).ready(function() {
    $(".pull-me").click() {
        $(".panel").slideToggle('slow');
    }
})

...and here is a link to the lesson. Nothing happens when I click on the div in the preview window that says "Slide Up/Down". Did I mess up or is something wrong here?


#2

$(document).ready(function() {
   $('.pull-me').click(function() {    // note this line
      $('.panel').slideToggle('slow');
    });
});

#3

Thanks, that explains why the code wasn't working. It doesn't explain why the lesson thought it was correct, though, haha.


#4

The SCT is not exhaustive, and may only look for certain patterns in the code, whether it works or not. The main concern is that you got it working as expected.


#5

I'm starting to get a bit worried about that last part (about the main concern being me getting it working as expected). Since writing this post less than an ago I've run into not one, but two more situations like this. First, in 3.4 I'm supposed to add a p element after a div with ID #one and then move it after a div with ID #two. Frankly, the instructions were extremely confusing to me (for starters, #01 is telling me to do something that was already achieved in the last lesson?), and I couldn't figure it out so I played with the code until I got this solution...

var $hello = ("<p>Hello World</p>");
$(document).ready(function() {
    $("#one").append($hello);
    $("#two").after($hello);
})

...which has the p appear in both places. It's accepted it, so it's not telling me what I'm doing wrong so I don't know how to fix it. :confused: I just continued on because I couldn't figure it out, and it was letting me. Second, in 3.6 I believe the instructions are wrong. It says to change the "addClass" function to a "toggleClass" function, and then "Click on your #text a bunch of times. See how it turns the highlighting on and off?" This code is accepted...

$(document).ready(function() {
    $("#text").toggleClass("highlighted");
})

...but it stays highlighted permanently and nothing happens when you click on it. It's a good thing I noticed that instead of blindly clicking continue, because I believe what it wants you to do is this.

$(document).ready(function() {
    $("#text").click(function() {
        $(this).toggleClass('highlighted')
    })
})

Yeah, so I'm just really confused at this point. No offense to you or Codecademy, but I'm debating whether I should continue because it seems like my head is getting filled with false information that will mess me up when I go to do something serious in the future.


#6

I was really confused before, but now I'm extra confused. Lesson 2.12 wants me to write code that will append a div with the contents of an input box inside another div with class .input. The only instruction is the following.

Go ahead and .append() a <div> with class="item" to the .list div of your HTML document, then MAKE SURE to click your button to add an item—the exercise will wait for you to do so!

I wrote this code...

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

...and the code is neither working, nor is the lesson making me click the button to confirm that it's working. It's like I'm flying through these lessons but I'm not learning anything. Is my computer messed up or something? Or am I just not meant to be doing this...

Edit: Okay, I figured out why this code wasn't working, no thanks to the Codecademy interpreter. Copy and pasting the HTML, CSS, and jQuery code into Codepen.io revealed that I forgot the parenthesis in my functions. Codecademy was simply throwing the error "Uncaught SyntaxError: Unexpected token {", where as Codepen.io showed me which line the error was occuring on. I guess I'll be doing that a lot now that I know Codepen.io can be a tool to show me where the error lies. :confused:


#7

The first line is misleading, as the object it references is not a jQuery object, but a plain text HTML string. Hence it has no additional properties other than those that come from the String class.

This exercise has two steps, to start with, the first is to create a paragraph element that we insert into the DOM after div#one.

$(document).ready(function() {
    $('#one').after('<p>Hello</p>');
});

The object is created right inside the argument for the after() method. It is a plain string, here, but as soon as it is inserted it becomes a selectable P-node object that we can see on the screen.

The second step targets this object with a P-node selector, $('p') which will find this object and move it.

$(document).ready(function() {
    $('#one').after('<p>Hello</p>');
    $('#two').after($('p'));
});

The third step (lesson 5, I believe?) has us create an object that will reside in memory, at first, and not be visible on the screen. This is similar to what you have done above. But, to keep it in the same scope, we should create it inside the ready handler, along with the rest of our code.

$(document).ready(function() {
    $p = $('<p>').text("Hello");
    $('#one').after($p);
    $('#two').after($p);
});

In the above we created a jQuery object, a single paragraph element. When we run this code, we will see the paragraph beneath div#two, but if you comment that line out for a moment and run again, you will see it beneath div#one.

Notice that it is one unique and dynamic object that we can move around at will, or remove from the page then re-insert at a later time. I like to call this a jQuery Sprite.

This course is really just a brief introduction that barely touches on jQuery, so it cannot really be considered a course. It helps if you have some JavaScript under your belt, and HTML & CSS since jQuery is JS, and it is heavily intertwined with HTML and CSS. We are dealing with interactions and manipulations of the DOM, which implies an HTML object at its root, and a style sheet in tow.

We are self-learning here, not really pupils in a class or with a full curricullum. Be sure to touch on all the web fundamentals before trying to move too far forward on jQuery alone. You'll be hitting a lot of walls if you don't.