document.getElementByID is not a function

nikhil_632447 0
Viewed 224188

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

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

  <body>
    <ul id="tasks">

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

and The jQuery :

$(document).ready(function(){
    //To add a task when the user hits the return key
    $('#task-text').keydown(function(evt){
      if(evt.keyCode == 13)
      {
        add_task(this, evt);
      }
      });
    //To add a task when the user clicks on the submit button
      $("#add-task").click(function(evt){
        add_task(document.getElementByID("task-text"),evt);
        });
    });

function add_task(textBox, evt){
  evt.preventDefault();
  var taskText = textBox.value;
  $("<li>").text(taskText).appendTo("#tasks");
  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 

$("#task-text")

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

getelementbyid jquery javascript
8 Answers

In my case, I was using it on an element instead of document, and according to MDN:

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll(), getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

user_1726370

The error document.getElementByID is not a function indicates a syntactic error.

You need to replace the errorprone D as in document.getElementByID() with document.getElementById()

Likewise,

  • To find HTML Elements by Tag Name: document.getElementsByTagName("p")
  • To find HTML Elements by Class Name: document.getElementsByClassName("classname")
  • To find HTML Element by CSS Selectors: document.querySelectorAll("p.introduction")
user_74294470

It worked like this for me:

document.getElementById("theElementID").setAttribute("src", source);
document.getElementById("task-text").innerHTML = "";

Change the 

getElementById("theElementID")

for your element locator (name, css, xpath...)

user_30947940

if you are using jQuery, it's jQuery("#my_id")

if you are using raw javascript, it's document.getElementById('my_id'), remember that the parameter should not contain #.

user_4459080
Related