JavaScript - Binding a function to an Event to an element returns an error?

Question

I don't know what's wrong here, but what do you think is wrong?

I have this very simple JavaScript function, which, when executed directly to the Inspect Element console works perfectly, but when I bind it to an event, then it returns the error "Uncaught TypeError: object is not a function". What do you think is wrong here?

Here's the function.

var pass_sh_busy = 0;
var pass_sh = function(y) {
if(pass_sh_busy) {
        document.getElementById('pass_sh').type = 'password';
        document.getElementById('pass_sh').placeholder = '********';
        pass_sh_busy = 0;
    } else {
        pass_sh_busy = 1;
        document.getElementById('pass_sh').type = 'text';
        document.getElementById('pass_sh').placeholder = 'password';
    }
}

pass_sh is this...

<input name="rass" id="pass_sh" placeholder="*********" type="password">

Here's my binded element.

<input style="width:5%" type="button" onclick="pass_sh()">

This is a very weird error I think. What do you think is wrong here?

score 1 · Answer 1 · answered Jun 02 '13 at 12:41

1

The problem is that you have an element with ID pass_sh. Elements with IDs will create global variables with the ID referring to that element. So pass_sh inside the HTML attribute seems to refer to the DOM element instead of your function.

Either give the element a different ID or your function a different name.

FYI, there are more flexible ways to bind event handlers.

answered Jun 02 '13 at 12:41

Felix Kling

795,719
175
1,089
1,143

Wow! I was not aware of it. Thanks! +1 – Jun 02 '13 at 12:56
Thank you very much for that answer. I thought something else is creating the problem. Thank you. :) – thisjt Jun 03 '13 at 05:45

JavaScript - Binding a function to an Event to an element returns an error?

1 Answers1