Question

我为了测试目的编写了这段代码。我的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的情况下工作？？

Answer 1

事件处理程序需要一个未执行的功能：

linkhome.addEventListener("click", function () { loadcontent("contenthome") });

通过传递参数，您实际上正在执行loadcontent函数。因此处理程序获取函数返回的内容而不是函数本身。要解决此问题，请将laodcontent("contenthome")包装在函数表达式中，以便以后可以通过单击处理程序触发它。

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

1 个答案: