jQuery Style Methods not working

I am working on the preview font jQuery exercise and my code doesn’t alter the browser. I checked the walkthrough and it looks like my code is identical to what the walkthrough used. Is it a glitch or am I doing something wrong? Thanks!

Exercise: https://www.codecademy.com/paths/web-development/tracks/learn-jquery/modules/learn-jquery-style-methods/projects/font-preview


$(document).ready(() => {
  $('#text').on('keyup', (event) => {

We should not include the .val() method as part of the jQuery selector.


For readability, and easier debugging I would recommend using an intermediary variable to hold the value.

let value = $(event.currentTarget).val();

Above I swapped in .text() for .html() since we are injecting plain text, not raw HTML. Not a game changer, though; just makes more sense to me.


When you are done this project, ping this topic if you would like see how we can refactor it and make the code simpler and easier to read.

Thanks for the help! I finished the project and it would be great to see how to refactor it to make the code simpler.

Right now you likely have about 30 lines of code inside the jQuery wrapper. Truth is we do not need to wrap everything, just the listeners.

If you look at each event listener,

jQueryNode.on(event, function() {})

We can remove that function to a standalone position outside of the jQuery wrapper.

function changeText (event) {
  let value = $(event.currentTarget).val();

or we could write it as an arrow function since it does not rely on a $(this) (or this) context.

const changeText = event => {
  let value = $(event.currentTarget).val();

Notice how the jQuery still works, even outside of the wrapper? That’s because the jQuery function is loaded into the namespace and can be invoked from anywhere. The $ is just an alias for jQuery which we invoke on a selector to access the methods.

Our main jQuery wrapper will look like this…

$(() => {
  $('#text').on('keyup', changeText);
  $('#font').on('change', changeFont);
  $('#weight').on('change', changeWeight);
  $('#size').on('keyup', changeSize);

Just as we have done with the changeText function, write the other three functions to correspond with the callbacks. Now the code is simplified and easy to read and understand. We could write each callback into one line but I think it better that we use intermediary variables to avoid any muddle.

Happy coding!