Pass an object's keys to onclick function

Question

I'm trying to create an unordered list menu but can't get the onclick to call the proper function. How do I pass the object's keys through the onclick function?

function ulMenu(menuList) {

    for (var keys in menuList) {
        var li = document.createElement("li");

        var textNode = document.createTextNode(keys);
        li.appendChild(textNode);

        li.onclick = function() { ?keys? };

        ul.appendChild(li);
    }

    var element = document.getElementsByTagName("body")[0];
    element.appendChild(ul);
}

window.onload = function() {
    ulMenu({Register: Register,"Sign In": Login});
    }

function Login() {
    alert("Login Function");
}

function Register() {
    alert("Register Function");
}

No need to query `body`, you can do `document.body.appendChild()`. — elclanrs, Sep 21 '13 at 02:25
I've been self teaching myself for a long time and that never occurred to me, it's much shorter code. — Robert Peek, Sep 21 '13 at 02:31

score 0 · Answer 1 · edited May 23 '17 at 12:05

You will need to read about how closures works in JavaScript, but here's the answer:

li.onclick = (function (keys) {
    return function () {
        //handler code
        console.log(keys);
    };
})(keys);

Something more efficient would be to create a function outside of the loop that will be responsible for generating your handler.

function createClickHandler(keys) {
    return function () {
        //use keys
    };
}

Then in the loop:

li.onclick = createClickHandler(keys);

Pass an object's keys to onclick function

1 Answers1