document getElementByID is not a function

Question

I m learning jQuery and was following a tutorial  a very strange error has perplexed me  Here s my html      lt  doctype html gt   lt html gt     lt head gt       lt title gt  Simple Task List  lt  title gt       lt script src  jquery js  gt  lt  script gt       lt script src  task-list js  gt  lt  script gt     lt  head gt      lt body gt       lt ul id  tasks  gt        lt  ul gt         lt input type  text  id  task-text    gt         lt input type  submit  id  add-task    gt     lt  body gt   lt  html gt    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        lt li gt    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        lt li gt    text taskText  appendTo is not a function  Break On This Error      lt li gt    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

User · Accepted Answer

It s document getElementById   and not document getElementByID    Check the casing for Id

User · Answer

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

User · Answer

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

It s getElementById    Note the lower-case d in Id

User · Answer

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

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          lt li   gt    text taskText  appendTo   tasks      textBox val

[javascript] document.getElementByID is not a function

Examples related to javascript

Examples related to jquery

Examples related to getelementbyid