Menu
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
435
To solve the "getElementById is not a function" error, make sure to spell the getElementById() method correctly, as it is case-sensitive, and only call the method on the document object, e.g. document. getElementById('btn') . Copied!
HTML DOM Document getElementById() The getElementById() method returns an element with a specified value. The getElementById() method returns null if the element does not exist. The getElementById() method is one of the most common methods in the HTML DOM.
getElementById() The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
1) Place the external JS file <script> tags at the end of the body, right before the </body> tag. This will not only load/display your page faster, but will guarentee that the DOM is parsed before anything in that JS file can run. 2) Since you have jQuery, put your immediately executed code inside of a $(document).
It's document.getElementById() and not document.getElementByID(). Check the casing for Id.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
