Member Avatar for Sailor_Jerry

has anyone ran into this before?

The id and name had a capital letter. “submitButton “submitButton

<input id="submitButton" name=" submitButton " value="ok" 
type="button" title="submit" onclick="submitButton();" />

For some reason I would see the following js error: object doesn't support this property or method. When I clicked the button.

When I changed the id and name to all lowercase "submitbutton" everything works fine.

  • 2 Contributors
  • 3 Replies
  • 122 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Short summary and practical fixes for the name-collision shown by (and guessed correctly by ).

Browsers expose named elements on the global Window object (historically an IE quirk, now defined behavior in modern HTML). If a global function or variable shares that same identifier, the element can shadow the function and a call like submitButton() will try to invoke the DOM node (not a function), producing the error you saw. The safest approach is to stop relying on global names for element access and keep DOM ids/names distinct from JS identifiers.

Suggested fixes and patterns:

  • Use a JS-only id prefix so it cannot collide with globals, for example js-:

    <button id="js-submit">OK</button>

<script>
function handleSubmit(event) {
  event.preventDefault();
  // your logic
}

document.getElementById('js-submit').addEventListener('click', handleSubmit);
</script>

  • Prefer programmatic binding (addEventListener) over inline onclick. Reference elements explicitly with getElementById, querySelector, or scoped variables instead of relying on window properties.

  • Avoid naming form controls submit, action, etc., because they collide with existing DOM API names (e.g., form.submit).

Quick debugging checklist:

  • In the console check typeof window.submitButton and window.hasOwnProperty('submitButton') to see if an element is shadowing a function.
  • Wrap code in an IIFE or modules to avoid creating globals.
  • If supporting very old IE, use attachEvent fallback and be aware this differs there.

These steps prevent the kind of conflict you ran into and make code more predictable across browsers.

Recommended Answers

All 3 Replies

Member Avatar for tgreer

Probably due to having elements, JavaScript functions, etc. all with the same name. That's just a guess.

Member Avatar for Sailor_Jerry

Good stuff.

"Internet Explorer incorrectly adds all name's (and maybe id's) of objects as global variables. So when you say submitButton(), it thinks you're trying to call the <input> tag itself as a function. Renaming the tag (javascript is case sensitive) prevented this.

This is Internet Explorer's fault, because submitButton shouldn't be a global variable." (Slime)

Member Avatar for tgreer

Good guess. Where did you get that little piece of information? Please post the link for the benefit of future readers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.