Javascript 如何将元素的ID作为参数传递给使用getElementById的函数?

Javascript 如何将元素的ID作为参数传递给使用getElementById的函数?,javascript,Javascript,我写这段代码是为了测试。我的HTML文件中有一些div设置为display:none。我编写了一个脚本来获取这些div的内容,并将它们分配给另一个div。目前,该脚本可以正常工作,但我想知道一种将loadcontent函数作为单个函数编写的方法。代码如下: 'use strict'; var gameWorld = { contentoutput: document.getElementById("contentoutput"), linkhome : document.getE

我写这段代码是为了测试。我的HTML文件中有一些div设置为display:none。我编写了一个脚本来获取这些div的内容,并将它们分配给另一个div。目前,该脚本可以正常工作,但我想知道一种将loadcontent函数作为单个函数编写的方法。代码如下:

'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包装在函数表达式中,以便单击处理程序稍后可以触发它。

谢谢!这起作用了。是否有任何链接可以让我获得有关此行为的更多信息?