CODEWITHSUNDEEP
javascriptjquerygetelementbyid
nikhil
nikhil

Reputation: 9415

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

Upvotes: 64

Views: 284942

Answers (8)

Siwei
Siwei

Reputation: 21577

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

Upvotes: 0

undetected Selenium
undetected Selenium

Reputation: 193308

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

Upvotes: 4

David
David

Reputation: 97

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

Upvotes: 1

eozzy
eozzy

Reputation: 68740

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.

Upvotes: 47

DanielB
DanielB

Reputation: 20230

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("");
};

Upvotes: 3

jemartin80
jemartin80

Reputation: 510

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;
}

Upvotes: 1

Buhake Sindi
Buhake Sindi

Reputation: 89189

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

Upvotes: 160

Town
Town

Reputation: 14906

It's getElementById()

Note the lower-case d in Id.

Upvotes: 24

Related Questions