document.getElementByID не является функцией - PullRequest
Новая
       5

document.getElementByID не является функцией

32 голосов
/ 20 июня 2011

Я изучаю jQuery и следую учебному пособию, очень странная ошибка озадачила меня. Вот мой 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>

и 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 = "";
};

Когда я добавляю элементы, нажав клавишу возврата, проблем нет. Но когда я нажимаю кнопку «Отправить», Firebug показывает эту ошибку 

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

Я попытался использовать jQuery вместо того, чтобы заменить его на 

$("#task-text")

На этот раз ошибка: 

$("<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

Я пытался отладить это в течение некоторого времени, но я просто не понимаю. Это, наверное, действительно глупая ошибка, которую я сделал. Любая помощь наиболее ценится.

Редактировать: Я использую jQuery 1.6.1

Ответы [ 5 ]

95 голосов
/ 20 июня 2011

Это document.getElementById(), а не document.getElementByID(). Проверьте корпус на Id.

16 голосов
/ 20 июня 2011

Это getElementById()

Обратите внимание на строчные буквы d в Id.

2 голосов
/ 20 июня 2011

Я изменил ваш скрипт для работы с 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($("#task-text"),evt);
    });
});

function add_task(textBox, evt){
  evt.preventDefault();
  var taskText = textBox.val();
  $("<li />").text(taskText).appendTo("#tasks");
  textBox.val("");
};
1 голос
/ 11 июня 2019

В моем случае я использовал его на element вместо document и в соответствии с MDN:

В отличие от некоторых других методов поиска элементов, таких как Document.querySelector ()и Document.querySelectorAll (), getElementById () доступны только в качестве метода объекта глобального документа и недоступны в качестве метода для всех объектов элемента в DOM.Поскольку значения идентификаторов должны быть уникальными во всем документе, нет необходимости в «локальных» версиях функции.

1 голос
/ 07 мая 2016

Есть несколько вещей не так с этим, как вы можете видеть в других сообщениях, но причина, по которой вы получаете эту ошибку, заключается в том, что вы называете свою форму getElementById. Поэтому document.getElementById теперь указывает на вашу форму вместо метода по умолчанию, который предоставляет javascript. Смотрите мою скрипку для рабочего демо 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;
}
...