Chrome扩展程序不会在点击按钮时运行功能 [英] Chrome Extension won't run function on button click
问题描述
我有这个代码，它会将您正在使用的网站的html复制并复制到剪贴板。我现在有一个工作版本，当你点击铬图标时复制文本，但我想添加更多选项，所以我试图在扩展弹出窗口内点击按钮时运行脚本。
不幸的是，我不能在我点击按钮时发生某些事情！当我用alert（hi）替换我的函数时，当我单击扩展图标而不是弹出窗口中的按钮时，它会弹出警报。帮助!!!
alert（HI）;
}）;
对于更长的函数或可重用函数，只需创建一个命名函数： / p>
函数sayHi（）{
alert（HI）;
}
同样，它定义了一个函数，但不执行它。然后，您可以使用该函数的名称：
document.getElementById（full_team）。addEventListener（'click'，打招呼）;
确保将引用传递给函数，而不是执行它：
//错！
document.getElementById（full_team）。addEventListener（'click'，sayHi（））;
<说到重用函数，假设你想做一个与参数有关的函数。例如，假设你希望能够根据哪个元素被按下来对不同的人说嗨。然后，你可以去更高级别，并做出一个函数返回一个函数：
function sayHiTo（name）{
return function（）{
alert （+名+！）;
//这里，调用函数是正确的：它将返回一个函数
document.getElementById（full_team）。addEventListener（'click '，说HiTo（Bob））;
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>
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"));
这篇关于Chrome扩展程序不会在点击按钮时运行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
