Uncaught TypeError: Illegal invocation html/JS

Question

Issue: Once I assign the document.getElementById function to a variable then invoke it I get the error above. Full Code below But if I replace var $docid = document.getElementById to var $docid = (id) => document.getElementById(id); the html page is able to grab the quiz id and render it the proper question parts (the radio choices and input text and such) The reason I bring this up is because this goes against a basic functionality in javascript which is assigning functions to variables to be able to invoke. Nothing about document.getElementById() claims the need for arrow function usage. Can anyone explain?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="get_quiz">
</form>
<br>
<form id="qbank">
</form>
<br>
<button type="submit" onclick="submit_quiz()">Submit Questions</button>
<button type="submit">Release Scores</button>
<button type="submit" onclick="add_question()">Add Question</button>
<button type="submit" onclick="view_qbank()">View Qbank</button>
</body>
<script>
var $docid = document.getElementById;
var x = 0;
function add_question() {
x++;
$docid('get_quiz').innerHTML += `
<h1>Question ${x}</h1>
<br>
<textarea id="${x}" rows=1 cols=100></textarea>
<br>
<p><strong>Constraints</strong></p>
<input type ='radio' id="if${x}"> If statement </input>
<input type ='radio' id="while${x}"> While Loop </input>
<input type ='radio' id="for${x}"> For Loop </input>
<br>
<br>
<input type = 'radio' id="easy${x}" name="difficulty">Easy </input>
<input type = 'radio' id="medium${x}" 
name="difficulty">Medium</input>
<input type = 'radio' id="hard${x}" name="difficulty">Hard</input>
<br>
<p><strong>Test Case</strong></p>
<input type="text" id="param${x}" placeholder="parameters"></input>
<input type="text" id="return${x}" placeholder="expected value">
</input>
`;
}

This is the error, sorry forgot to add this: Uncaught TypeError: Illegal invocation at add_question (teacher.html:27) at HTMLButtonElement.onclick (teacher.html:17) add_question @ teacher.html:27 onclick @ teacher.html:17 — Lawrence Gabriel, Feb 26 '18 at 06:56

score 4 · Accepted Answer · answered Feb 26 '18 at 07:03

4

Your $docid method does not work because it does not have a correct thisValue. Binding document to that method will fix that problem:

var $docid = document.getElementById.bind(document);

More on this: https://stackoverflow.com/a/3127440/4949918

answered Feb 26 '18 at 07:03

Axnyff

7,275
2
26
31

score 1 · Answer 2 · answered Feb 26 '18 at 07:06

You need to bind document as this. Please try this.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="get_quiz">
</form>
<br>
<form id="qbank">
</form>
<br>
<button type="submit" onclick="submit_quiz()">Submit Questions</button>
<button type="submit">Release Scores</button>
<button type="submit" onclick="add_question()">Add Question</button>
<button type="submit" onclick="view_qbank()">View Qbank</button>
</body>
<script>
var $docid = document.getElementById.bind(document);
var x = 0;
  
function add_question() {
x++;
$docid('get_quiz').innerHTML += `
<h1>Question ${x}</h1>
<br>
<textarea id="${x}" rows=1 cols=100></textarea>
<br>
<p><strong>Constraints</strong></p>
<input type ='radio' id="if${x}"> If statement </input>
<input type ='radio' id="while${x}"> While Loop </input>
<input type ='radio' id="for${x}"> For Loop </input>
<br>
<br>
<input type = 'radio' id="easy${x}" name="difficulty">Easy </input>
<input type = 'radio' id="medium${x}" 
name="difficulty">Medium</input>
<input type = 'radio' id="hard${x}" name="difficulty">Hard</input>
<br>
<p><strong>Test Case</strong></p>
<input type="text" id="param${x}" placeholder="parameters"></input>
<input type="text" id="return${x}" placeholder="expected value">
</input>
`;
}
</script>

Thanks guys, but do you understand why this needs to be done? It seems stupid that I have to tell the dom to bind at document when I'm literally writing out document.getElementById.... This wouldn't ever happen if I was strictly working on just JS with any other function — Lawrence Gabriel, Feb 26 '18 at 07:17
Yeah, it seems like a little bit stupid. However, this is how JavaScript works. It relates to the concept about "this" keyword. Please find a good article that explains this keyword and it will make more sense for you. :) — Kevin, Feb 26 '18 at 19:33

Uncaught TypeError: Illegal invocation html/JS

2 Answers2