javascript change name of called function

Question

Hi all im very new to javascript so please be gentle. im mixing php with my calls and I have a slight issue. I need to alter the function name that is called in an onclick event.

<div class=\"span4\" id=\"pass\">
    <button class=\"btn btn-block btn-large btn-warning\" id=\"bypass\" disabled onclick=\"pass(); return false;\">
        - 
    </button>
</div>

above is the div with the std call. before this point some variables are set from another function call and I need to change the above call to "pinpass2() or pinpass3 etc.

function pincheck(id,type,lastid,pin){
    document.getElementById('fade').style.display=\"block\";
    document.getElementById('calc').style.display=\"block\";  
    var staffid = id;
    document.getElementById('bypass').onclick = function (){\"pinpass\"+staffid(); 
    return false;
};
}

the above is the function that should do it but i can't seem to get it working. Any help appreciated. ps if i include the following into the pincheck function the desired staffid is diaplayed

alert(\"staff id\"+staffid);

Answer 1

document.getElementById('bypass').onclick = pinpass2;

That should work just fine. pinpass2 is already a function, you can assign it to onclick like any other object (yes, functions are objects in Javascript). So just change the onclick when you need it.

If you can't detect changes to the result of staffid() , then you should use a switch instead.

document.getElementById('bypass').onclick = function() {
    switch(staffid()) {
        case 1: pinpass(); break;
        case 2: pinpass2(); break;
        default: pinpass3(); break;
    }
};

Though most of the time you don't have to do this. Also, I'm not sure if staffid is supposed to be a function or a variable, but it doesn't change anything.

By the way, this way of attaching handlers is quite old. There's a more powerful one:

document.getElementById('bypass').addEventListener('click', pinpass2, false);

With that you can attach more than one function. To remove one:

document.getElementById('bypass').removeEventListener('click', pinpass2, false);

Answer 2

In javascript functions are first class so you can literally just assign pincheck to another variable like this.

var pinpass2 = pincheck;

Now you can still call it like this

pinpass(1,2,3,4);

Answer 3

You can change the onclick attribute the same way you'd change any attribute ?

var elem = document.getElementById('bypass');

elem.setAttribute('onclick', 'pinpass' + staffid + '(); return false;');

FIDDLE

Answer 4

I'm not 100% from your question, but it looks like you are trying to call a different function based on the staffid variable. IE if it is 2 you want to call pinpass2() .

If this is a global function you can call window[ 'pinpass' + staffid ]() and it will call the function you want (if it exists).

EXAMPLE: if staffid = 2 then window[ 'pinpass' + staffid ]() is eqivalent to window[ 'pinpass2' ]() which is the same as calling pinpass2() .

This works because all global vars (including functions) are properties of the window object, and properties can be accessed using a dynamically generated name and square bracket notation.