document.getElementByID no es una función

Question

Jun 20, 2011, 11:54 AM

document.getElementByID no es una función

Estoy aprendiendo jQuery y estaba siguiendo un tutorial, un error muy extraño me dejó perplejo. Aquí está mi 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>

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

Cuando agrego elementos Al presionar la tecla de retorno, no hay problema. Pero cuando hago clic en el botón Enviar, firebug muestra este error

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

Intenté usar jQuery en lugar de reemplazarlo con

$("#task-text")

Esta vez el error es:

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

He estado tratando de depurar esto por algún tiempo pero simplemente no lo entiendo. Es probablemente un error realmente tonto que he cometido. Cualquier ayuda es muy apreciada.

Edit: estoy usando jQuery 1.6.1