功能或按钮不起作用？答案

【问题标题】：Functions or buttons not working?功能或按钮不起作用？
【发布时间】：2013-10-10 07:17:24
【问题描述】：

我正在编写一个程序，通过单击按钮保存当前 URL （它是一个 chrome 扩展，我想让 pc builder 保存他们的部件的 URL，而不用做一百万个书签）

HTML：

<!DOCTYPE html>
<html>


<body>

<script type="javascript" src="buttonsact.js"> 


</script>



<button type="button" onclick="changeCPU()">Change CPU</button><h5 id=CPU>Not Selected Yet</h5>
<button type="button" onclick="changeMOTH()">Change Motherboard</button><h5 id=MOTH   id=part>Not Selected Yet</h5>
<button type="button" onclick="changeHARD()">Change Hard Drive</button><h5 id=HARD>Not Selected Yet</h5>
<button type="button" onclick="changeRAM()">Change RAM</button><h5 id=RAM>Not Selected Yet</h5>
<button type="button" onclick="changeGPU()">Change GPU</button><h5 id=GPU>Not Selected Yet</h5>
<button type="button" onclick="changeCASE()">Change Case</button><h5 id=CASE>Not Selected Yet</h5>
<button type="button" onclick="changePOWER()">Change Power Unit</button><h5 id=POWER>Not Selected Yet</h5>
<button type="button" onclick="changeMON()">Change Monitor</button><h5 id=MON>Not Selected Yet</h5>
<button type="button" onclick="reset()">!!!!RESET!!!!</button>



</body>
</html>

Javascript：

function getpage()
{
    chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
})
}

function changeCPU()
{
x=document.getElementById("CPU");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changeMOTH()
{
x=document.getElementById("MOTH");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changeRAM()
{
x=document.getElementById("RAM");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changeHARD()
{
x=document.getElementById("HARD");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changeGPU()
{
x=document.getElementById("GPU");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changeCASE()
{
x=document.getElementById("CASE");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changePOWER()
{
x=document.getElementById("POWER");  // Find the element
x.innerHTML=tablink;    // Change the content
}

function changeMON()
{
x=document.getElementById("MON");  // Find the element
x.innerHTML=tablink;    // Change the content
}


function reset()
{
a=document.getElementById("CPU");  // Find the element
b=document.getElementById("MOTH");
c=document.getElementById("HARD");
d=document.getElementById("RAM");
e=document.getElementById("GPU");
f=document.getElementById("CASE");
g=document.getElementById("POWER");
h=document.getElementById("MON");

a.innerHTML="Not Selected Yet";    // Change the content
b.innerHTML="Not Selected Yet";
c.innerHTML="Not Selected Yet";
d.innerHTML="Not Selected Yet";
e.innerHTML="Not Selected Yet";
f.innerHTML="Not Selected Yet";
g.innerHTML="Not Selected Yet";
h.innerHTML="Not Selected Yet";
}

window.onload = getpage()

我测试了它是否只是我的代码通过更改来捕获 URL 的问题： a.innerHTML="Not Selected Yet"; // Change the content

到这个 a.innerHTML="Not Selected Yet Yet"; // Change the content

然后点击重置。这仍然没有奏效。我想一些关于我的程序如何调用该函数的事情。我最初确实让它工作，但我不确定我是如何改变它的。谢谢你！

【问题讨论】：

你能发布一个现场演示来重现这个问题吗？控制台有错误吗？
developer.chrome.com/extensions/contentSecurityPolicy.html

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

您不能在属于扩展的页面中指定具有onclick 属性的事件处理程序。您需要使用 javascript 绑定您的事件（使用 addEventListener 或类似的）。

【讨论】：

【解决方案2】：

问题似乎是变量 tablink 超出了所有更改函数的范围。尝试在 getpage 函数之外定义它，然后在里面分配值。

【讨论】：

我这样做了，但按钮仍然不起作用。我认为这也与按钮有关。不过也谢谢你告诉我这件事！
HTML 上的一些东西可能会弄乱代码。您可能希望用引号将 h5 标记的 ID 括起来。而且您在主板元素内还有两个 ID。单击按钮时还有任何控制台错误吗？

【解决方案3】：

getpage() 函数内的var tablink 仅限于该函数的范围，因此在设置 innerHTML 值时未定义。通过删除 var 关键字将其更改为全局或在 getpage() 函数之外定义它。

【讨论】：

我这样做了，但按钮仍然不起作用。我认为这也与按钮有关。不过也谢谢你告诉我这件事！