1
const letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","_"];

$.each(letters, (number, letter) => {
  let b = $('<button>');
   b.addClass('letter-button letter letter-button-color')
    .attr('data-let', letter)
    .text(letter);
   $('#buttons').append(b);
});

$('.letter-button').on('click', () =>  {
    let fridgeMagnet = $('<div>');
    fridgeMagnet.addClass('letter fridge-color')
    .text($(this).data('let'));
    console.log(this);
    $('#display').append(fridgeMagnet);
});

This is an old exercise and the solution is with the outdated version of JavaScript. I am trying to update step 4 and 5 to ES6, but $(this) is not working here. Can anyone explain to me how to fix the click handler and how $(this) changes from ES5 to ES6? We want the newly created buttons to appear on the backround fridge image with the correct letter data. Also, what is 'data-let'?

Daniel Arnost
  • 67
  • 1
  • 1
  • 7
  • 1
    tl;dr version: `this` won't do what you need it to do if you use an arrow function. Instead, use `event.currentTarget` instead of `this`. – JLRishe Dec 05 '17 at 17:19
  • thanks. It worked. I guess I'll delete now, everyone is marking as duplicate. – Daniel Arnost Dec 05 '17 at 17:29

1 Answers1

0

You cant use arrow function with jquery envent handlers because of $(this) ,and arrow function is not the new function. the function keyword id not outdated ! use function () unstead.

You Can refer to this blog post for more info

Nacim Idjakirene
  • 1,882
  • 8
  • 26
  • 45