Javascript passing parameters to function

Question

Rookie question: I have the following JavaScript functions. This works correctly but I don't want to hardcode the strings "Names" and "namesDiv". I want to pass them in as parameters to the getItems().How do I do this?

Edit: The function GetMsg() returns a JSON object: result.

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 = "";
}

icktoofay · Accepted Answer · 2011-07-09 23:19:55Z

6

For half of them, it's obvious; you just start passing the parameters to the function:

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

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

callback is a little more complex. We'll turn it into a function returning the callback.

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

Now we can call makeCallback to get a callback. We can now write getItems:

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

answered Jul 9, 2011 at 23:19

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K.R. Over a year ago

@icktoofay Exactly what I needed. Thanks! @Pablo Fernandez Sorry I should have explained better in my question.

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

You can simply:

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); });
}

EDIT: I think I've covered everything...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 9, 2011 at 23:15

LoveAndCoding

7,9473 gold badges34 silver badges55 bronze badges

Comments

Pablo Fernandez · Accepted Answer · 2011-07-09 23:21:29Z

1

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

and then:

function getItems(param1, param2) {

param1 will be namesDiv and param2 will be Names

This said, I'd recommend you take a look at Unobtrusive JavaScript especially the part that talks about separation of behavior from markup.

edited Jul 9, 2011 at 23:21

answered Jul 9, 2011 at 23:14

Pablo Fernandez

106k59 gold badges196 silver badges234 bronze badges

5 Comments

icktoofay Over a year ago

That doesn't answer the whole question; there are other uses of "Names" and "namesDiv" outside of getItems.

Pablo Fernandez Over a year ago

do read the question. It's " I want to pass them in as parameters to the getItems().How do I do this?". The OP probably copied the whole js for completeness

LoveAndCoding Over a year ago

Yes, but callback will not be in scope and will not know what 'namesDiv' is.

icktoofay Over a year ago

I did read the question. Sure, they wanted to pass them in as parameters, but they probably wanted the arguments to apply to the other functions as well.

Pablo Fernandez Over a year ago

Fair enough. Anyway since this answers the question I'll let the OP decide if this is enough or he needs more guidance (your answer can help him in that case)

Jim Deville · Accepted Answer · 2011-07-09 23:20:26Z

use addEventListener instead of inline 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);

Collectives™ on Stack Overflow

Javascript passing parameters to function

4 Answers 4

1 Comment

HTML

JS

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

HTML

JS

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related