Intermediate Front End Developer Codepen Projects

I started the first project and feel somewhat unprepared for what I’m expected to do. A big problem I’m having is a simple trigger click event with JQuery and I think I’m doing something wrong? Libraries?

JS:

$(document).ready(function() {
$("#newQuote").on(“click”, function() {
$(".Quote").html(“Here is the message”);
});
});

I know that the $ is referencing a JQuery library that already exists in FCC and I know that I can include links to such libraries. Do i have to include the library link to use this code on codepen. If so what library is this?

You can add jQuery by going to Settings > JavaScript > Add External JavaScript > Quick-add and clicking jQuery.

2 Likes

Does the $ only reference jQuery or is it used to shorthand any reference to an included library?

The $ is only for jQuery.

$("#newQuote").click(function(){
$(".Quote").html(“Here is the message”);
})

$("#newQuote").on(“click”, function() {
$(".Quote").html(“Here is the message”);
});

I noticed you removed the .on and the click and placed .click where .on was… but thats all I understand without explanation. Also the original code works fine. How does your correction alter the function of the code?

Technically it’s just a symbol jQuery uses as an alias for jQuery. Writers of other libraries can just as easily use it as an alias for their library if they choose to (though it probably wouldn’t be a great idea to do so given how ubiquitous jQuery is).

As with many things in life, reading the docs will help.

2 Likes

$ is just [an alias for] the name of the main function used by jQuery. It’s as simple as that when jQuery isn’t available you can’t use the function.

Re on and click, jQuery has aliases for the most common events, on('click', doSomething) is the same as click(doSomething). It’s entirely up to you, but I’d generally use on as much as possible, just for clarity (there are some other slight technical benefits to always doing this, eg ability to pass multiple events, and scoping the events)

1 Like