javascript - 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

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>

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

Share Improve this question edited May 7, 2019 at 12:16 asked May 7, 2019 at 11:23 Vishal Patil 3814 silver badges15 bronze badges

1 does this.id work? Otherwise you could do a JavaScript workaround. – Anis R. Commented May 7, 2019 at 11:27
1 Good reason to not put onclick attributes inside the HTML. Use .addEventListener( 'click', function( event ) { ... }. The you can get the id as event.target.id or event.target.getAttribute("id"); so you do not need a seperate variable to exist. Trying to figure out why it works in chrome but not IE11. – Shilly Commented May 7, 2019 at 11:29
@AnisR. yes this.id works thanks.But is this is a known issue is there any documentation somewhere.Looks like a mon issue – Vishal Patil Commented May 7, 2019 at 11:30
@Shilly,yes thanks for the feedback but i wanted to know what is the reason behind this or any doc mentione about this issue – Vishal Patil Commented May 7, 2019 at 11:32

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

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>

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 mon 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.

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Getting SCRIPT5009: 'id' is undefined in Internet Explore IE 11 - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)