Chrome Extension won't run function on button click

Question

I have this code that scrapes the html of the website you are on and copies it to the clipboard. I currently have a working version that copies the text when you click the chrome icon, but I want to add several more options so I am trying to run the script on button click within the extension popup.

Unfortunately, I can not for the life of me manage to get something to happen on button click! When I replace my function with alert("hi"), it pops up the alert when I click on the extension icon rather than the button within the popup. Help!!!

document.addEventListener('DOMContentLoaded', function () {
      document.getElementById("full_team").addEventListener('click', alert("HI"));;     
});

<body>
 <h2>Click to copy your roster</h2>
 <button id="full_team">Full Team</button>
 <script src="event.js"></script>
</body>

Please make a [minimal example](http://stackoverflow.com/help/mcve) by taking out everything not related to the behavior you're seeing; you might even solve the problem yourself in the process. — Xan, Oct 10 '14 at 13:39

Xan · Answer 1 · 2014-10-10T14:36:04.907

1

addEventListener expects the event name, and a reference to the function that should be executed.

However, alert("HI") is not a reference to a function. This statement executes the alert, and returns undefined.

There are two ways to solve this:

For short functions that should be executed, you can use the anonymous function construct. The statement
```
function(){ alert("HI"); }
```
does not execute the alert, but returns a reference to the function that will execute the alert when invoked. So, your code becomes:
```
document.getElementById("full_team").addEventListener('click', function() {
  alert("HI");
});
```
For longer functions, or functions that can be reused, just make a named function:
```
function sayHi() {
  alert("HI");
}
```
Again, this defines a function, but does not execute it. Then, you can use the name of the function:
```
 document.getElementById("full_team").addEventListener('click', sayHi);
```
Be sure to pass the reference to the function, and not execute it:
```
 // Wrong!
 document.getElementById("full_team").addEventListener('click', sayHi());
```

Speaking of reusing functions, suppose you want to make a parameter-dependent function. For instance, suppose you want to be able to say "Hi" to various people depending on which element is pressed.

Then, you can go higher-level and make a function that returns a function:

function sayHiTo(name) {
  return function() {
    alert("Hi, " + name + "!");
  }
}

// Here, invoking the function is correct: it will return a function
document.getElementById("full_team").addEventListener('click', sayHiTo("Bob"));

edited Oct 10 '14 at 14:36

answered Oct 10 '14 at 14:27

Xan

74,770
16
179
206

Thank you for your answer, unfortunately it sounds like my example wasn't a good enough minimal example since my real code and other efforts did pass in a function. First try :) If I try your second example, the alert appears and disappears in a flash, any idea why that would happen? Passing in my getTeam function still doesn't appear to do anything. – Emily Oct 10 '14 at 15:01
Okay then, try to debug your code. To inspect the popup, right-click the extension button and select "Inspect popup". – Xan Oct 10 '14 at 15:03
There is nothing in the console logs when I interact with the popup, using both the SayHi function and my own function. I can use getElementById to find my button, no problem. I'm not really sure where to go from there, just beginning to learn :/ – Emily Oct 10 '14 at 15:08
Your initial function was expecting a tab argument, but has nowhere to get it from. – Xan Oct 10 '14 at 15:09
Ok, I am pretty sure it needs the tab element (I modified a different extension), but not sure where it comes from. The initial method call was just this which worked like a charm: chrome.browserAction.onClicked.addListener(getTeam); – Emily Oct 10 '14 at 15:12
The getTeam function fires, but the injectedMethod no longer works. https://github.com/tenshiemi/FantasyClipboard – Emily Oct 10 '14 at 15:21
I refer you to this question for further enlightenment: http://stackoverflow.com/questions/26168732/parameter-passed-without-explicitly-stating-javascript-chrome-extension/26170064#26170064 A listener for `browserAction.onClicked` gets the tab object as a parameter, but a click handler for a page element gets an HTML event as a parameter. Which you try to pass in place of a tab, and that fails. – Xan Oct 10 '14 at 15:25
AH! Ok, starting to understand. Thank you! – Emily Oct 10 '14 at 15:30

Chrome Extension won't run function on button click

1 Answers1

Linked