This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed 5 years ago.
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'?
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
Related
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 months ago.
Why arrow function fails to identify this pointer in the following case. I know that regular functions have their own execution scope and this but I could not identify why following failed. In the arrow function case, this is undefined. If someone can shed light, it would be great. Thank you!
PS: This code is just for experimental purposes, not anything serious.
const addProperty = function(op, func) {
String.prototype.__defineGetter__(op, func);
};
// works
addProperty('upper', function() {
return this.toUpperCase();
});
// fails to identify this
addProperty('lower', () => {
return this.toLowerCase();
});
Arrow functions preserve the this of the outside scope. function keyword functions, in this context, get the this of the object they're put on. That's just what they do.
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 months ago.
I'm new to Jquery, and I'm trying to figure out how to use the "this" keyword.
When I try to test it using a simple button with a console log, it keeps giving me the entire window object. Could someone please explain to me what I'm doing wrong? I just want "this" to return the button.
`
$("button").on("click", (e) => {
console.log(this)
console.log($(this))
})
`
This is what I tried. and here is what it gives me in the console log:
I'm not 100% sure, but I think this is the Window object. At least, I'm sure this isn't my button.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)
(5 answers)
Closed last year.
const chapterButtons = $(".chapter-button");
chapterButtons.each(() => {
$(this).click(() => {
window.location.href = "reading-page.html";
let chptNum = parseInt($(this).attr("id"));
sessionStorage.setItem("chptNum", chptNum);
})
})
The $(this).attr("id") is undefined for all elements even though each element certainly has an id along with the .chapter-button class. I think there is some issue with using $(this) and it is not what I think it is. However, I'm not sure what it should be. I couldn't find someone else having this exact same issue.
Any help would be much appreciated!
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I am confused in trying to understand the function event object.
How does function(event) differ from function = event => in a code like the one below?
functionName(event) {
// code
}
Check our this article will cover arrow Functions for Beginners Javascript. Arrow functions are a new ES6 syntax for writing JavaScript functions.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 5 years ago.
I have recently come across this code with which I am unfamiliar:
const foo = () => {
/*code block here*/
}
As far as I can tell, it means the same thing as:
const foo = function () {
/*code block here*/
}
Is that a correct assumption, or are there differences?
What is the correct name to refer to this bit of code?
What exactly is the '=>' doing? I've never seen it in Javascript before.
This is ES6 arrow function. It's basically same as function (){},
with some differences such as not rebinding this.
Reference on MDN