Uncaught TypeError: lang is not a function [duplicate]

by

Consider this code:

<input type="button" value="Debugger Test" onclick="debugger;" />
<input type="button" value="Prototype Test" onclick="console.log(__proto__);" />

When you click on “Debugger Test” and open your debugger, you’ll see that there seems to be an implicit with scope wrapped around the onclick, making all the <input>’s properties accessible without needing to refer to the button.

Clicking on “Prototype Test” logs the prototype of the current scope. You’ll see that it’s the HTMLInputElement’s prototype, making all the scopable properties of this entire prototype chain available to the scope.

Interestingly, the scopable part of the prototype chain of the current HTMLDocument is included as well.

All this means that all global attributes (lang is one of them) and several others specific to buttons are overridden. E.g. value, type also wouldn’t work. Similarly, variables like createElement (from document) also wouldn’t work, but the unscopable append (from ParentNode.prototype) would.

All this is also explained in this answer to a related question about global variables clashing with window properties.

Your best bet is to use the standard way of adding event listeners: addEventListener.

<input type="button" value="Test" />
<script>
  function lang() {
    alert("Hello, World! It’s not an HTML event handler attribute this time");
  }

  document.querySelector("input").addEventListener("click", lang);
</script>

More Related Contents:

  1. “Uncaught SyntaxError: Unexpected token , ” when create my object javascript
  2. “Uncaught TypeError: Illegal invocation” in Chrome
  3. Uncaught TypeError: Cannot read property ‘value’ of undefined
  4. Uncaught TypeError: (intermediate value)(…) is not a function
  5. My javascript is returning this error: $.ajax is not a function
  6. Javascript “Not a Constructor” Exception while creating objects
  7. How to fix ‘TypeError: Cannot call method “getRange” of null’ in Google Apps Script
  8. TypeError: cli.init is not a function for react native
  9. Uncaught Typeerror: cannot read property ‘innerHTML’ of null
  10. javascript TypeError: document.getElementsByTagName(“p”)[0].innerHtml is not a function
  11. TypeError: document.body is null
  12. .val() don't edit input
  13. How can I create a two dimensional array in JavaScript?
  14. Dynamically set value of a file input [duplicate]
  15. JavaScript numbers to Words
  16. getElementById returns null? [closed]
  17. Start HTML5 video at a particular position when loading?
  18. Javascript: Unicode string to hex
  19. In Javascript, how do I check if an array has duplicate values?
  20. How do I create a GUID / UUID?
  21. How do I escape a string inside JavaScript code inside an onClick handler?
  22. Insert external page html into a page html
  23. Event timeline with animation
  24. How to open print dialog after pdf generated?
  25. Commas messing with number input in Javascript
  26. How to remove all click event handlers using jQuery?
  27. Where argument of first next() call goes? [duplicate]
  28. How to select empty inputs (value=””) using jQuery
  29. Why JSON allows only string to be a key?
  30. Why do shaders have to be in html file for webgl program?

Leave a Comment