Question

我正在学习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

Answer 1

它是document.getElementById()而不是document.getElementByID()。检查外壳是否为Id。

Answer 2

这是getElementById()

请注意d中的小写Id。

Answer 3

如果您愿意，我已经修改了您的脚本以使用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("");
};

Answer 4

正如您在其他帖子中看到的那样，这有几个问题，但是您收到该错误的原因是因为您将表单命名为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;
}

Answer 5

就我而言，我是在element而不是document上使用它，并且根据MDN：

与其他一些元素查找方法（例如Document.querySelector（）和Document.querySelectorAll（））不同，getElementById（）仅可用作全局文档对象的方法，而不适用于所有文档对象中的方法DOM。由于ID值在整个文档中必须唯一，因此不需要该函数的“本地”版本。

Answer 6

它对我来说是这样的：

document.getElementById("theElementID").setAttribute("src", source);
document.getElementById("task-text").innerHTML = "";

更改

getElementById("theElementID")

用于元素定位符（名称，css，xpath ...）

document.getElementByID不是函数

6 个答案: