"Illegal Invocation" error on simple script

Question

I want to mess around with Speech Recognition API, so I started with the simple page which starts recognition on click on body element. My scripts.js file is:

var recognition = new window.webkitSpeechRecognition();
document.body.addEventListener("click", recognition.start, false);

Now when I click anywhere on body element I have the strange error in Chrome console:

Uncaught TypeError: Illegal invocation

It refers to first line of my HTML code. My HTML file is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="scripts.js"></script>
</body>
</html>

How do I fix this weird error?

try `document.body.addEventListener("click", function(){recognition.start()}, false);` — Madhawa Priyashantha, Sep 03 '17 at 13:56
Thank you, now it works. But why it works like that, and doesn't work when just passing recognition.start? — 1valdis, Sep 03 '17 at 13:58
related https://stackoverflow.com/questions/9677985/uncaught-typeerror-illegal-invocation-in-chrome — Madhawa Priyashantha, Sep 03 '17 at 14:03

score 3 · Accepted Answer · answered Sep 03 '17 at 14:01

Youre loosing context:

document.body.addEventListener("click", recognition.start, false);

Is equal to:

var start = recognition.start;
document.body.addEventListener("click", start, false);

So inside of start, this will refer to window, and windows cannot speak. To resolve it, bind:

document.body.addEventListener("click", recognition.start.bind(recognition), false);

or use a function inbetween:

document.body.addEventListener("click", _=>recognition.start(), false);

"Illegal Invocation" error on simple script

1 Answers1