9

In my HTML I define the lang function in the script tag and add the "Test Fire!" button which has to call lang on click:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing Functions</title>
  <script type="text/javascript">
    function lang() {
      alert("Hello, World! It's JavaScript this time");
    }
  </script>
</head>

<body>
  <form action="">
    <input type="button" value="Test Fire!" onclick="lang();">
  </form>
</body>

</html>

However, if I click the button I get this error:

Uncaught TypeError: lang is not a function

But if I change the function name from lang to anything else this code works fine.

YakovL
  • 7,557
  • 12
  • 62
  • 102
SanyamMishra
  • 129
  • 10

2 Answers2

7

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>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
  • So I'm assuming both Firefox and Chrome have this `with` scope, while IE does not? – Spencer Wieczorek Jul 08 '16 at 23:22
  • @SpencerWieczorek This seems to be the case for these three browsers. This issue is also new to me. I’m not sure whether this is a specified and documented feature… For Firefox at least, this doesn’t seem to be related to quirks mode. – Sebastian Simon Jul 08 '16 at 23:24
  • Somehow IE managed to make this code run. Any clues why so? – SanyamMishra Jul 08 '16 at 23:25
  • 1
    @SanyamMishra Well, IE apparently does not wrap the code in the `onclick` in an implicit `with` scope as opposed to the other browsers. – Sebastian Simon Jul 08 '16 at 23:27
  • @Xufox any idea of a workaround? – Richard Barker Jul 08 '16 at 23:28
  • 1
    @RichardBarker Haven’t I written that in my answer? Use `addEventListener`! Or use any function name that isn’t a global attribute or any attribute or property name for the element you’re using `onclick` with (good luck guessing each time). Just stick to the modern standard (`addEventListener`) and you’ll generally have less trouble. – Sebastian Simon Jul 08 '16 at 23:30
  • Yes but I was speaking of the `with` issue not the event listener. that seems like a bug to me but it could be a design decision. – Richard Barker Jul 08 '16 at 23:32
  • @RichardBarker Well, this is browser-specific behavior. There doesn’t seem to be any way of overriding that. – Sebastian Simon Jul 08 '16 at 23:35
  • 1
    @RichardBarker It's very likely a design decision. Using the `onclick` attribute is discouraged anyways. – Spencer Wieczorek Jul 08 '16 at 23:37
2

There is no reason to complicate (I really do not know why it does not work), but you can use:

  • Add the alert directly in the input.

Result: https://jsfiddle.net/cmedina/h4m1qcoq/6/

or

Add listener to input

function lang() {
   alert("Hello, World! It's JavaScript this time");
}

document.getElementById('test').onclick = lang

Result: https://jsfiddle.net/cmedina/h4m1qcoq/7/

CMedina
  • 4,034
  • 3
  • 24
  • 39