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.

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.

• javascript
• function

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

3 Answers 3

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

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.

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);