CODEWITHSUNDEEP
javascriptinternet-explorer-11
Vishal Patil
Vishal Patil

Reputation: 381

Getting SCRIPT5009: 'id' is undefined in Internet Explore IE 11

I have a very simple script(setUser) which is called on click of a button.This script is working fine in chrome but in IE 11 i am getting a console error. Another weird thing is i am getting that error only when dev tool is open.It works fine if devtool is not open.

Error is :- SCRIPT5009: 'id' is undefined

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function setUser(eventType){
            console.log(eventType);
        }
    </script>
</head>
<body>
    <button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>

Simple Workaround for this is to declare a var id; just below the script.But i need the proper documented reason why this doesnot work in ie11 but same works in chrome.And is a better solution than what i tried

Workaround :- by adding var id at the top

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var id;
        function setUser(eventType){
            console.log(eventType);
        }
    </script>
</head>
<body>
    <button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>

expected :- when dev tool is open in ie11 and when we click the button we should get the console log as "vish"

actual result :- SCRIPT5009: 'id' is undefined js error

Upvotes: 3

Views: 6510

Answers (3)

Jan Turoň
Jan Turoň

Reputation: 32912

id is simply undefined, as the error message says. If you declare it, the error is gone, but it won't behave like you expected. If you declare it, it exists with value undefined. You probably wanted

onclick="setUser(this.id)"

this.id means the button context, while simply id tries to find it in global context. In case of your error, id is not declared, whereas

var id; // or var id=undefined;

declares it, and leaves it undefined, so the browser at least knows it is a variable. By saying id is undefined Explorer means it is not declared.

I believe the reason is that the browser searches for variables and named elements (referenced by name or id attribute; this is not standard, but browsers do it), which actually doesn't exist in global context and are looked up by reference and Explorer obviously can't handle this situation. If it is declared as var, javascript knows it is not a named element reference.

Example below shows the non-standard behaviour: it should end with error test is not defined (it really is not), but browsers say hello.

<input id="test" value="hello">
<script>
  alert(test.value);
</script>

Upvotes: 2

Shilly
Shilly

Reputation: 8589

The cause of it not working in IE11 is because you do not specify a doctype for the HTML document in the block of code that threw the error.

If I add <!DOCTYPE html> to the start of the HTML, as in the workaround you show; it works in IE11 as well for me, without adding the var id;

The exact reason is unknown to me, but without the doctype, IE will run the page in quirks mode. And that seems to mess up the determination of the function scope when the browser tries to parse onclick="setUser(id)" into valid JS code.

This would not happen if the doctype is correct and the page can hence be run in the correct mode. This would also no happen if the browsers HTML engine did not have to parse the HTML string setUser(id) into valid JS code before it can be used. Hence it's not a common issue anymore since the standard these days is to not use inline event handler attributes on HTML tags.

So prefer explicit event binding with javascript when possible to not run into issues like this, where a totally unrelated part, the doctype, messes up your code.

Upvotes: 1

Anis R.
Anis R.

Reputation: 6912

Using onclick="setUser(this.id)" should work.

However, a cleaner workaround would be to do all the onclick handling in JavaScript:

onload = function() {
  var buttons = document.getElementsByTagName("button");
  for(var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
      console.log(this.id);
    }
  }
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="vish" style="height:40px;width:200px">Click Me</button>
    <button id="vish2" style="height:40px;width:200px">Click Me 2</button>
</body>
</html>

Upvotes: 0

Related Questions