nikhil nikhil - 9 months ago 20
Javascript Question

document.getElementByID is not a function

I'm learning jQuery and was following a tutorial, a very strange error has perplexed me.
Here's my html :

<!doctype html>
<title> Simple Task List </title>
<script src="jquery.js"></script>
<script src="task-list.js"></script>

<ul id="tasks">

<input type="text" id="task-text" />
<input type="submit" id="add-task" />

and The jQuery :

//To add a task when the user hits the return key
if(evt.keyCode == 13)
add_task(this, evt);
//To add a task when the user clicks on the submit button

function add_task(textBox, evt){
var taskText = textBox.value;
textBox.value = "";

When I add elements By hitting the return key, there's no problem.
But When I click the Submit Button then firebug shows this error

document.getElementByID is not a function
[Break On This Error] add_task(document.getElementByID("task-text"),evt);
task-list.js (line 11)

I tried to use jQuery instead replacing it with


This time the error is :

$("<li>").text(taskText).appendTo is not a function
[Break On This Error] $("<li>").text(taskText).appendTo("#tasks");
task-list.js (line 18
which results in the following error

I've been trying to debug this for some time but i just don't get it. Its probably a really silly mistake that i've made. Any help is most appreciated.

Edit :
I'm using jQuery 1.6.1


It's document.getElementById() and not document.getElementByID(). Check the casing for Id.