Javascript 如何将元素的ID作为参数传递给使用getElementById的函数?
我写这段代码是为了测试。我的HTML文件中有一些div设置为display:none。我编写了一个脚本来获取这些div的内容,并将它们分配给另一个div。目前,该脚本可以正常工作,但我想知道一种将loadcontent函数作为单个函数编写的方法。代码如下:Javascript 如何将元素的ID作为参数传递给使用getElementById的函数?,javascript,Javascript,我写这段代码是为了测试。我的HTML文件中有一些div设置为display:none。我编写了一个脚本来获取这些div的内容,并将它们分配给另一个div。目前,该脚本可以正常工作,但我想知道一种将loadcontent函数作为单个函数编写的方法。代码如下: 'use strict'; var gameWorld = { contentoutput: document.getElementById("contentoutput"), linkhome : document.getE
'use strict';
var gameWorld = {
contentoutput: document.getElementById("contentoutput"),
linkhome : document.getElementById("linkhome"),
linkshop : document.getElementById("linkshop"),
linkupgrade : document.getElementById("linkupgrade"),
linkachievement : document.getElementById("linkachievement"),
addEventHandlers : function() {
linkhome.addEventListener("click", loadcontent1);
linkshop.addEventListener("click", loadcontent2);
linkupgrade.addEventListener("click", loadcontent3);
linkachievement.addEventListener("click", loadcontent4);
}
}
function loadcontent1 () {
var x = document.getElementById("contenthome").innerHTML;
contentoutput.innerHTML = x;
};function loadcontent2 () {
var x = document.getElementById("contentshop").innerHTML;
contentoutput.innerHTML = x;
};function loadcontent3 () {
var x = document.getElementById("contentupgrade").innerHTML;
contentoutput.innerHTML = x;
};function loadcontent4 () {
var x = document.getElementById("contentachievement").innerHTML;
contentoutput.innerHTML = x;
};
function init() {
gameWorld.addEventHandlers()
}
document.addEventListener("DOMContentLoaded", init);
我试着这样写,但没有成功:
function loadcontent(contentid) {
var x = document.getElementById(contentid).innerHTML;
contentoutput.innerHTML = x;
}
并更改了事件处理程序
addEventHandlers : function() {
linkhome.addEventListener("click", loadcontent("contenthome"));
linkshop.addEventListener("click", loadcontent("contentshop"));
...
}
有人知道为什么这不起作用吗?
我怎样才能让它工作?
还有一个附带问题:为什么contentoutput.innerHTML不指定gameWorld.contentoutput?
事件处理程序需要一个未执行的函数:
linkhome.addEventListener("click", function () { loadcontent("contenthome") });
通过传递参数,实际上是在执行loadcontent函数。因此,处理程序得到的是函数返回的内容,而不是函数本身。要解决此问题,请将laodContentContentContentTome包装在函数表达式中,以便单击处理程序稍后可以触发它。谢谢!这起作用了。是否有任何链接可以让我获得有关此行为的更多信息?