可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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

回答2:

It's getElementById()

Note the lower-case d in Id.

回答3:

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

回答4:

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