Can someone please help me understand!?

JavaScript
1

Im having a hard time understanding this simple concept within javascript functions.

I’ll use this code that I built using a tutorial to better illustrate what im talking about here. https://codepen.io/TuscannyCodes/pen/PobEXgZ

I think my issue basically is that im unsure about function parameters and how they work. In this case specifically, Ive created an event listener:

todoList .addEventListener (‘click’, deleteCheck);

and later in the code I’ve created a function :

function deleteCheck (e) {

const item = e.target;

if(item.classList[0] === “trash-btn”){
const todo = item.parentElement;
todo.remove();

}

I don’t understand why ‘e’ is passed into the parameters of the function :sweat_smile:. Wouldn’t the function work properly without this? Why is the ‘e’ there? I know that it has something to do with the eventListener that I created earlier, but Im blurry on why and how this works. If anyone can help me understand this and the concept that would help me out a lot.

Thanks! Any help is greatly appreciated :thinking:

2

Is the e binding the function to the eventListener???

I don’t understand because the function is already mentioned in the event itself. :triumph:

3 
var deleteButton = document.getElementById("Remove");
  deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
  completeButton.addEventListener("click", completeListItem);

Assign addEventListener to specific id of the button. id todo is the ul so clicking anything inside ul will run both functions

1 Like
5

W3 explanation, MDN documentation.
From W3 page.

Callback function specifies the function to run when the event occurs.

When the event occurs, an event object is passed to the function as the first parameter(e in your case). The type of the event object depends on the specified event. For example, the “click” event belongs to the MouseEvent object.

You may or may not use the ‘e’ that was passed, but it will be passed anyway.

2 Likes
6

Ohh ok so the the ‘e’ is optional in regular cases. I get that im adding ‘e.target’ in this specific bit of code, but I see how normally it can work without it. That makes sense. That was confusing me. :+1:

Also thanks for linking that link and documentation :+1: . Along with you guys’s explanations it really added together.

7

Ok, so because the event is not attached to a specific element and more of an event that is floating freely, I needed to pass in the event into this function to target the event down to a specific class item. That makes sense.

Ive been using .onclick 's in my HTML file’s for this type of thing before I started Learning Javascript, so creating event Listeners is a different concept to wrap my head around.

Thanks for your help! :+1:

8

Nice, really didn’t think of doing it in that way. Thanks!

9

QUESTION : so you can pass in the event Listener by using either ‘event’ or just ‘e’?

10

‘e’ is just a variable/property name that your function uses.

func(x){return x**x}
is no different from
func(event){return event**event}

Let’s say that you have…
number = 10
Then, to use that variable in a function you write…
func(number)

I don’t know if that was what you were asking about.

1 Like
11

[https://codepen.io/dev_dave/pen/MWbdwaj?editors=1010] (w3school example) :sunglasses:

1 Like
12

Nice! Thanks for sharing this! :+1:

1 Like
13

ahh I see now.

Thanks I think im getting it. I’ll make a few functions to practice and pass in some things to I can really get it. :+1:

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.