如何传递元素's ID作为使用getElementById的函数的参数

How to pass the element's ID as an argument to a function which uses getElementById?

本文关键字：getElementById 函数 参数 ID 元素 何传递      更新时间：2023-09-26

我写这段代码是为了测试。在我的HTML文件中，我有一些用display:none设置的div。我写了一个脚本来获取这些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函数。因此，处理程序获取函数返回的内容，而不是函数本身。要解决此问题，请将laodcontent("contenthome")封装在函数表达式中，以便稍后单击处理程序可以触发它。

相关文章：