Arrow functions not working in Web Safe Font Preview


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(() => {
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)?


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

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



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) => {

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() {

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) => {

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:


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.



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


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