document.getElementByID is not a function

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

It's getElementById()

Note the lower-case d in Id.

Solution 4 - Javascript

I've modified your script to work with jQuery, if you wish to do so.

$(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($("#task-text"),evt);
    });
});

function add_task(textBox, evt){
  evt.preventDefault();
  var taskText = textBox.val();
  $("<li />").text(taskText).appendTo("#tasks");
  textBox.val("");
};

Solution 5 - Javascript

There are several things wrong with this as you can see in the other posts, but the reason you're getting that error is because you name your form getElementById. So document.getElementById now points to your form instead of the default method that javascript provides. See my fiddle for a working demo https://jsfiddle.net/jemartin80/nhjehwqk/.

function checkValues()
{
   var isFormValid, form_fname;

   isFormValid = true;
   form_fname = document.getElementById("fname");
   if (form_fname.value === "")
   {
	   isFormValid = false;
   }
   isFormValid || alert("I am indicating that there is something wrong with your input.")

   return isFormValid;
}

Solution 6 - Javascript

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

Solution 7 - Javascript

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")

Content Type	Original Author	Original Content on Stackoverflow
Question	nikhil	View Question on Stackoverflow
Solution 1 - Javascript	Buhake Sindi	View Answer on Stackoverflow
Solution 2 - Javascript	eozzy	View Answer on Stackoverflow
Solution 3 - Javascript	Town	View Answer on Stackoverflow
Solution 4 - Javascript	DanielB	View Answer on Stackoverflow
Solution 5 - Javascript	jemartin80	View Answer on Stackoverflow
Solution 6 - Javascript	David	View Answer on Stackoverflow
Solution 7 - Javascript	undetected Selenium	View Answer on Stackoverflow