javascript - Why my function is not a function? - Stack Overflow

admin管理员组

文章数量:1305305

I have this in my view page:

<input type="checkbox" id="toggle_SITEID" name="@@toggle_SITEID" onclick="toggle_SITEID(this)" /> New <br />

then in my js file I have this:

toggle_SITEID = function (chk) {
    // something
}

and then I click checkbox, "something" won't run. I check in firebug console the error message was:

toggle_SITEID is not a function

So why is it?

I have this in my view page:

<input type="checkbox" id="toggle_SITEID" name="@@toggle_SITEID" onclick="toggle_SITEID(this)" /> New <br />

then in my js file I have this:

toggle_SITEID = function (chk) {
    // something
}

and then I click checkbox, "something" won't run. I check in firebug console the error message was:

toggle_SITEID is not a function

So why is it?

• javascript
• html

Share Improve this question Follow edited Apr 18, 2012 at 6:42 gdoron 150k5959 gold badges302302 silver badges371371 bronze badges asked Apr 18, 2012 at 4:11 Mr.RendezvousMr.Rendezvous 2,00355 gold badges2121 silver badges3434 bronze badges 17

• 4 Are you including your javascript file in your HTML? – djlumley Commented Apr 18, 2012 at 4:12
• 4 Is it in the right scope? i.e. is toggle_SITEID a variable in some other function, not in the global namespace? – Ry- ♦ Commented Apr 18, 2012 at 4:12
• 1 Can you post a jsFiddle that reproduces the problem, please? (Make sure to set the JavaScript location to "no wrap (head)", too) – Ry- ♦ Commented Apr 18, 2012 at 4:19
• 3 If the element has a property with the same name as the function, it will break. This also applies to the document element. Your HTML doesn't show any attribute with the exact name toggle_SITEID. Any chance you've added a property to the element with that name, or to the document? – user1106925 Commented Apr 18, 2012 at 5:10
• 1 @amnotiam. Please elaborate more in the CW answer(but don't tell the munity or they will be upset...) what did you mean, because it does work in chrome(but no in IE) Fiddle. – gdoron Commented Apr 18, 2012 at 16:19

 |  Show 12 more ments

3 Answers 3

Sorted by: Reset to default 8

There could be couple of reasons for this error:

• You didn't reference the script in the HTML file.

• The function isn't declared in the global scope but in an inner scope.
  global scope- WORKING DEMO
  inner scope - NON WORKING DEMO

• There is an element whose id is the same as the function name(toggle_SITEID).
  In Internet Explorer, using an element's id is a shortcut for document.getElementById(). Break the link by using a var declaration.

• Another issue that can arise is when you have an inline handler that tries to use a global variable that interferes with the unique scope chain of inline handlers. That happens when the global...

  • has the same name as any property on the element with the handler, or
  • has the same name as any property on the document

  Since the scope chain of an inline handler has the element itself, as well as the document, injected into the scope chain as variable objects, any property on those objects will interfere when accessing global variables.

  For example, given this element: <a onclick="foo();">click me</a>, we can successfully invoke the global foo() unless we've done something like document.foo = "bar". Since the document is injected as a variable object in the scope chain, the document.foo now shadows the global foo.

  Same goes with the element itself. If we add the foo property to the element before invoking the global function, that property will shadow the global. <a onclick="this.foo = 'bar'; foo();">click me</a>

The error for me was the the ID was the same name as the function.

Change the id to something else different to the function name you aim to call on-click.

Change

<input type="checkbox" id="toggle_SITEID" name="@@toggle_SITEID" onclick="toggle_SITEID(this)" /> New <br />

To:

<input type="checkbox" id="toggle_SITEID" name="@@toggle_SITEID" onclick="toggle_SITE_ID(this)" /> New <br />

One thing jumps out at me:

You don't end it with a semi-colon, even though it's an anonymous function.

Try this:

toggle_SITEID = function (chk) {
    alert("I work!");
};

Working Demo at: http://jsfiddle/crazytonyi/cDNcu/

本文标签： javascriptWhy my function is not a functionStack Overflow