Javascript将参数传递给函数答案

【问题标题】：Javascript passing parameters to functionJavascript将参数传递给函数
【发布时间】：2024-01-20 11:27:01
【问题描述】：

菜鸟问题：我有以下 JavaScript 函数。这可以正常工作，但我不想硬编码字符串“Names”和“namesDiv”。我想将它们作为参数传递给 getItems()。我该怎么做？

编辑：GetMsg() 函数返回一个 JSON 对象：结果。

HTML：

<input type="button" onclick="getItems(); return false;" value="Go"/>

JS：

function getItems() {
   loadingMsg();
   GetMsg("Names", null, callback);
}

function callback(result, args){
   clearContainer();
   //do stuff
   document.getElementById("namesDiv").append(foo);
}

function loadingMsg(){
    clearContainer();
    // do stuff
    document.getElementById("namesDiv").append(foo);   
}

function clearContainer(){
    document.getElementById("namesDiv").innerHTML = "";
}

【问题讨论】：

标签： javascript parameter-passing

【解决方案1】：

其中一半是显而易见的；您只需开始将参数传递给函数：

function loadingMsg(containerID) {
    clearContainer(containerID);
    document.getElementById(itemDiv).append(foo);   
}

function clearContainer(containerID) {
    document.getElementById(containerID).innerHTML = "";
}

callback 稍微复杂一些。我们将把它变成一个返回回调的函数。

function makeCallback(containerID) {
    function callback(result, args) {
        clearContainer();
        document.getElementById(containerID).append(foo);
    }
    return callback;
}

现在我们可以调用makeCallback 来获得回调。我们现在可以写getItems：

function getItems(itemType, containerID) {
   loadingMsg(containerID);
   GetMsg(itemType, null, makeCallback(containerID));
}

【讨论】：

@icktoofay 正是我需要的。谢谢！ @Pablo Fernandez 抱歉，我应该在我的问题中解释得更好。

【解决方案2】：

你可以简单地：

HTML

<input type="button" onclick="getItems('Names', 'namesDiv'); return false;" value="Go"/>

JS

function getItems(name, div) {
    loadingMsg();
    GetMsg(name, null, function(r, args) { callback(div, r, args); });
}

编辑：我想我已经涵盖了所有内容......

【讨论】：

【解决方案3】：

 onclick="getItems('namesDiv', 'Names'); return false;"

然后：

function getItems(param1, param2) {

param1 将是 namesDiv 和 param2 将是 Names

这就是说，我建议你看看Unobtrusive JavaScript，尤其是关于行为与标记分离的部分。

【讨论】：

这并不能回答整个问题； "Names" 和 "namesDiv" 在 getItems 之外还有其他用途。
阅读这个问题。它是“我想将它们作为参数传递给 getItems()。我该怎么做？”。为了完整性，OP 可能复制了整个 js
是的，但回调不在范围内，也不知道“namesDiv”是什么。
我确实阅读了这个问题。当然，他们想将它们作为参数传递，但他们可能希望这些参数也适用于其他函数。
很公平。无论如何，既然这回答了这个问题，我会让 OP 决定这是否足够或他需要更多指导（在这种情况下你的回答可以帮助他）

【解决方案4】：

使用addEventListener 而不是内联onclick

<input type="button" id="getItems" value="Go" />

JS：

function getItems(name, id) {
   loadingMsg(id);
   GetMsg(name, null, callback(id));
}

function callback(id){
    return (function() {
        function(result, args){
           clearContainer(id);
           //do stuff
           document.getElementById(id).append(foo);
         }
    })();
}

function loadingMsg(id){
    clearContainer(id);
    // do stuff
    document.getElementById(id).append(foo);   
}

function clearContainer(id){
    document.getElementById(id).innerHTML = "";
}

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("getItems").addEventListener("click", function() {
        getItems("Names", "namesDiv");
    }, false);
}, false);

【讨论】：