Arrow functions not working in Web Safe Font Preview


#1

I was bumping into a wall trying to complete the Web Safe Font Preview project, as I could not make the keyup event handler to work:
$(’#text’).keyup(() => {
$(’.preview’).html($(this).val());
});
I was getting the following error: Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined

After reading about .keyup() and I changed the call back function to $(’#text’).keyup(function () {…}
and surprise!, it was working!

So. the question is: Is this because keyup event handlers do not support arrow functions or perhaps a bug in the interface for the exercise (given that the jQuery course is a beta version for now)?


#2

if you want to use the arrow function syntax, you have to use .on() like you learned here:

https://www.codecademy.com/courses/learn-jquery-event-handlers/lessons/mouse-events/exercises/on-mouseenter?action=lesson_resume&course_redirect=learn-jquery

okay, this example is for mouseenter, but the event can also be on() keyup

if you just want to use keyup, arrow key function syntax doesn’t seem to be supported


#3

Hi,

So I came across this same issue today, with the arrow syntax and the keyup event. I am not sure what causes the issue, but I believe I have found a solution to make this work and use the arrow syntax. I will post what I learned from my attempts and maybe, someone might be able to shed more light on this.

I fully believe the arrow syntax should work because it was used in the previous jQuery project. It was used to update a count down for the remaining number of characters available on the Feedster Project here.

So here is my first attempt:

$(document).ready(() => {
  $('#text').on('keyup', (event) => {
    $('.preview').html($(this).val());
  });
});

Which I received the following errors in console:

jquery.min.js:4 Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined
at r.fn.init.val (jquery.min.js:4)
at HTMLTextAreaElement.$.on (main.js:3)
at HTMLTextAreaElement.dispatch (jquery.min.js:3)
at HTMLTextAreaElement.q.handle (jquery.min.js:3)

I was able to work out two solutions. As stated in the previous posts I ditched the ES6 and used the older notation and got it working with the following:

$(document).ready(() => {
  $('#text').on('keyup', function() {
    $('.preview').html($(this).val());
  });
});

I was still sure that the arrow function syntax had to work somehow, because of the previous exercise I referenced. So I tried this and it works!

$(document).ready(() => {
  $('#text').on('keyup', (event) => {
    $('.preview').html($(event.currentTarget).val());
  });
});

This leads me to believe there is something awry with the ‘this’ value. I believe the ‘this’ being referenced is something other than out textarea with the ID of text. If that is the case I am not sure what ‘this’ is really referencing and how to make it reference our text ID.

I am glad I have two working solutions one with and one without the arrow function syntax, but I would love to know more as to why the one failed.

Thanks :smiley:


#4

this standards reference to the window object:

using the arrow syntax, the value of this stays at the window object. While using the es5 notation, the value of this changes to the clicked object.


#5

Thanks!

I also found this to have some helpful information regarding arrow functions and the this keyword


#6

that is also a good piece of documentation :slight_smile:

Good that you found it, being capable of finding the right documentation is really important

MDN is a good source for docs when it comes to the JS language