How can I replace an anonymous function with a named function in javascript?

Question

Hi so I created this code that works great.

document.getElementById("file").addEventListener('click', 


function () {

var textArea = document.getElementById("newTextArea");

//Retrieve the selected text :
var selText = window.getSelection();
var text = textArea.innerHTML;
// I need to make a condition here.  If the text doesn't have a span tag then do this: 
if (document.querySelector('.test') === null) {
    textArea.innerHTML = text.replace(selText, '<span class="test">'+selText+'</span>');
// if the text does have a span tag then remove the span tag
} else if (document.querySelector('.test') !== null) {
    var deSelText = document.querySelector('.test');
    var highlightedText = deSelText.innerHTML;
    var parent = deSelText.parentNode;
    var newNode = document.createTextNode(highlightedText);
    parent.insertBefore(newNode, deSelText);
    parent.removeChild(deSelText);
  }
}, false);

But I would like to make the anonymous function into a named function so it looks like this:

document.getElementById("file").addEventListener('click', classAndSpan(test), false);

here is the named function:

function classAndSpan(addClass) {

var textArea = document.getElementById("newTextArea");

//Retrieve the selected text :
var selText = window.getSelection();
var text = textArea.innerHTML;
// I need to make a condition here.  If the text doesn't have a span tag then do this: 
if (document.querySelector('.' + addClass) === null) {
    textArea.innerHTML = text.replace(selText, '<span class="' + addClass + '">'+selText+'</span>');
  // if the text does have a span tag then remove the span tag
} else if (document.querySelector('.' + addClass) !== null) {
    var deSelText = document.querySelector('.' + addClass);
    var highlightedText = deSelText.innerHTML;
    var parent = deSelText.parentNode;
    var newNode = document.createTextNode(highlightedText);
    parent.insertBefore(newNode, deSelText);
    parent.removeChild(deSelText);
  }
}

I'm missing something because this named function is not working. Do I return something in the function and if so what do I return?

Thanks for the help, very much appreciated.

Possible duplicate of How to pass parameter to function using in addEventListener? — Sebastian Simon
– Sebastian Simon, Commented Jan 26, 2017 at 20:18

Scott Marcus · Accepted Answer · 2021-05-28 19:58:51Z

8

In order to reference a function (which is what you do with a callback), you simply say the name of the function:

foo

In order to invoke a function, you use parenthesis:

foo();

So, when you write:

document.getElementById("file").addEventListener('click', classAndSpan(test), false);

You are actually invoking classAndSpan right away (even before the addEventListener() method call is invoked) instead of referencing classAndSpan.

Event handling functions (callbacks) are automatically called by the browser, so you can't supply arguments to them. However, if you want to pass an argument to a callback function when the event takes place, you can accomplish this by wrapping your named function inside of an anonymous function or another named function. Then, when the event occurs, the anonymous function (that doesn't have any parameters) will be invoked and it will execute your function call (that does have parameters).

Solution #1 (anonymous function calls named function with arguments):

document.getElementById("file").addEventListener('click', function(){
  // Because you want to pass arguments, you need to wrap this call inside of another fucntion
  classAndSpan(test);
}, false);

var test = "SOME VALUE";

function classAndSpan(addClass) {
  console.log("You called classAndSpan with a value of: " + addClass);
}

<input type="button" id="file" value="Click Me">

Solution #2 (named function calls named function with arguments):

document.getElementById("file").addEventListener('click', wrapper, false);

var test = "SOME VALUE";

function wrapper(){
  // Because you want to pass arguments, you need to wrap this call inside of another fucntion
  classAndSpan(test); 
}


function classAndSpan(addClass) {
  console.log("You called classAndSpan and passed: " + addClass);
}

<input type="button" id="file" value="Click Me">

edited May 28, 2021 at 19:58

answered Jan 26, 2017 at 20:18

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ajoy2w Over a year ago

Thank you so much! You explained that very well. Works like a charm. :)

Andyba Over a year ago

@Scott Marcus In Solution #1 you probably meant console.log("You called classAndSpan with a value of: " + addClass); ?

Scott Marcus Over a year ago

@Andyba I sure did. Answer updated. Nice catch. Thanks!

Abhinav Galodha · Accepted Answer · 2017-01-26 20:23:11Z

1

You do not need to invoke the function while you are adding it as an callback for the event Handler. Instead, you need to just reference the function declaration by the function name.

So you need to replace classAndSpan(test) to classAndSpan in the event handler.

document.getElementById("file").addEventListener('click', classAndSpan, false);

Also note that the callback function would receive the arguments from the Event. So, you can access the arguments like the event.Target.yourPropertyName , provided you add the yourPropertyName to the event Target.

edited Jan 26, 2017 at 20:23

answered Jan 26, 2017 at 20:16

Abhinav Galodha

9,9862 gold badges33 silver badges41 bronze badges

11 Comments

Scott Marcus Over a year ago

That won't work for the OP because the OP wants to pass an argument to classAndSpan.

Abhinav Galodha Over a year ago

data can be passed using the event.Target, why wouldn't it work if the property is assigned? If an event needs the arguments, it should come from the event arguments.

Scott Marcus Over a year ago

"provided you add the yourPropertyName to the event Target". And, what if the argument has no connection to the event.target? This is a brittle solution that limits the scale of the code and doesn't really address the actual question being asked.

Scott Marcus Over a year ago

" If an event needs the arguments, it should come from the event arguments." Says who? There is a difference between "event" arguments and "event handler" arguments. Event arguments are usually provided automatically on the event object, not the event.target. Event handler arguments have no restrictions whatsoever as to where they come from. That's business logic.

Abhinav Galodha Over a year ago

Your answer might be more relevant to the OP question. But in terms of design, the event handler/callback function/Subscriber needs to know minimal details of the Publisher. If the information needs to be passed it should be encapsulated in an abstraction like the Event Arguments object.

|

Matt Mokary · Accepted Answer · 2017-01-26 20:17:43Z

0

What you want to do is pass the function classAndSpan to addEventListener. Currently, you're not passing the function, but rather calling the function immediately and passing what it returns to addEventListener.

Change to this:

document.getElementById("file").addEventListener('click', classAndSpan, false);

answered Jan 26, 2017 at 20:17

Matt Mokary

7276 silver badges13 bronze badges

1 Comment

Scott Marcus Over a year ago

That won't work for the OP because the OP wants to pass an argument to classAndSpan.

Collectives™ on Stack Overflow

How can I replace an anonymous function with a named function in javascript?

3 Answers 3

3 Comments

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related