Javascript document.getElementByID 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6409505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementByID is not a function
提问by nikhil
I'm learning jQuery and was following a tutorial, a very strange error has perplexed me. Here's my html :
我正在学习 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>
and The jQuery :
和 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
我尝试使用 jQuery 而不是将其替换为
$("#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
编辑：我使用 jQuery 1.6.1
回答by Buhake Sindi
It's document.getElementById()and not document.getElementByID(). Check the casing for Id.
它是document.getElementById()和不是document.getElementByID()。检查外壳是否有Id。
回答by Town
It's getElementById()
它是 getElementById()
Note the lower-case din Id.
注意：小写d在Id。
回答by eozzy
In my case, I was using it on an elementinstead of document, and according to MDN:
就我而言，我在一个element而不是上使用它document，并且根据 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.
与其他一些元素查找方法如 Document.querySelector() 和 Document.querySelectorAll() 不同，getElementById() 仅作为全局文档对象的方法可用，而不能作为 DOM 中所有元素对象的方法。因为 ID 值在整个文档中必须是唯一的，所以不需要函数的“本地”版本。
回答by DanielB
I've modified your script to work with jQuery, if you wish to do so.
如果您愿意，我已经修改了您的脚本以使用 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("");
};
回答by jemartin80
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/.
正如您在其他帖子中看到的那样，这有几个问题，但您收到该错误的原因是因为您将表单命名为 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;
}
回答by David
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...)
用于您的元素定位器（名称、css、xpath...）
