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.

Answer 1

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">