CODEWITHSUNDEEP
javascriptaddeventlistener
user8679430
user8679430

Reputation:

Can I add the same eventListner to an element twice but calling different functions?

Is it possible to give an element the same Event listener but with 2 different functions calls?

Something like this

document.getElementById("searchBar").addEventListener("keyup", populateTable);

document.getElementById("searchBar").addEventListener("keyup", createButtons);

I have tried doing this but from my experience I only ever get 1 of the event listener to fire off at all.

So I have a search bar in my program that when the user types into it, the table below sorts according to what the user has typed. This search bar and the table belongs to a module that someone else built but I am using for my project. In this module, the program adds an event listener "change" to the search bar to allow it to search the table every time the user types. For my program, I also want to add the same "change" Event listener to the search bar but I want to connect it to a function I created that will do something different. I still want the search bar to change the table when the user types into it, but I also want it to call the function I created.

I know I could just go into the module code and call my function from the event listener that the other person created but I want to see if there is a way for me to solve this without editing the module code.

Thanks!

Upvotes: 0

Views: 65

Answers (1)

Sxribe
Sxribe

Reputation: 829

I would make a main function that calls both functions, and hook that up to the event listener. Let me explain what I mean:

var call_both = function() {
    populateTable();
    createButtons();
}

Then, just hook this to the event listener.

document.getElementById("searchBar").addEventListener("keyup", call_both);

Upvotes: 1

Related Questions