2011-06-20 31 views
19

Uczę się jQuery i podążałem za tutorialem, bardzo dziwny błąd wprawił mnie w zakłopotanie. Oto mój html:document.getElementByID nie jest funkcją

<!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> 

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

Kiedy dodać elementy naciskając klawisz powrotu, nie ma żadnego problemu. ale kiedy klikam przycisk Wyślij, a następnie Firebug pokazuje ten błąd

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

próbowałem użyć jQuery zamiast zastępując ją

$("#task-text") 

tym czasie błędu jest:

$("<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 "Próbowałem debugować to przez jakiś czas, ale po prostu nie rozumiem. To prawdopodobnie bardzo głupi błąd, który popełniłem. Każda pomoc jest najbardziej ceniona.

Edit: Używam jQuery 1.6.1

+6

Poza tematem: Jeśli uczysz się jQuery, FYI, bardzo rzadko, jeśli kiedykolwiek będziesz chciał użyć 'document.getElementById'. Odpowiednikiem jQuery jest [funkcja '$' (lub 'jQuery')] (http://api.jquery.com/jQuery/) z selektorem identyfikatora. jQuery w rzeczywistości pracuje nad błędami w 'getElementById' w niektórych przeglądarkach, więc jeśli używasz biblioteki, najlepiej jest * użyć * jej. :-) (Nie mówię, że nie powinieneś wiedzieć, co to jest 'getElementById'). –

+0

jeśli używasz jQuery, to dlaczego używasz klasycznej składni javascript, np. GetElementById. Powinno się użyć składni $ ('# id'). –

Odpowiedz

76

Jest to document.getElementById(), a nie document.getElementByID(). Sprawdź obudowę pod kątem Id.

+1

Dla mnie jest to 'Document.getElementById()' – Anwar

16

To getElementById()

Uwaga małą d w Id.

2

Zmodyfikowałem twój skrypt, aby działał z jQuery, jeśli chcesz to zrobić.

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

Istnieje kilka rzeczy złego w tym, jak można zobaczyć w innych postach, ale powodem dostajesz ten błąd jest, ponieważ nazwa formularza getElementById. Zatem document.getElementById wskazuje teraz na twój formularz zamiast domyślnej metody, którą zapewnia javascript. Zobacz moje skrzypce na działającą wersję 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; 
}