With input boxes type=checkbox - onclick function naming

Asked May 20 '14 at 19:26

Active May 20 '14 at 19:35

Viewed 50 times

In both chrome and IE, this code fails:

<script type="javascript">
    var state = false;
    function jsClicked(){
        state = !state;
        console.log("Clicked " + state);
    }
</script>

<input id="jsClicked" name="jsClicked" type="checkbox" onclick="jsClicked()">
</input>

but changing the name of the onclick function resolves the issue. The error being thrown is:

Uncaught TypeError: object is not a function

Here's the fiddle: onclick error fiddle

edited May 20 '14 at 19:33

Lee Taylor

7,761
16
33
49

asked May 20 '14 at 19:26

roguequery

3

http://stackoverflow.com/questions/9158238/why-js-function-name-conflicts-with-element-id – Jacob Mattison May 20 '14 at 19:29
I don't know why but it seems that it's confusing the element id with the function name. – DontVoteMeDown May 20 '14 at 19:29
1

Off topic, but I'd be curious to know why you need the `state` variable when the input itself has a `.checked` property that you can read. – cookie monster May 20 '14 at 19:30
Im in ie 8, no jquery. thanks for the link, ie reserving the name makes sense – roguequery May 20 '14 at 19:31
@roguequery just give your checkbox a different ID from function name – Yuriy Galanter May 20 '14 at 19:32
try adding text to the script tag – Crystal May 20 '14 at 19:43
No one mentioned jQuery. If you were referring to my comment, I'm talking about the native API. And it doesn't reserve the name. It's that the name appears automatically in the variable scope, so it shadows the global variable with the same name. – cookie monster May 20 '14 at 19:44

With input boxes type=checkbox - onclick function naming

0 Answers0