2011-06-20 26 views
19

मैं jQuery सीख रहा हूं और एक ट्यूटोरियल का अनुसरण कर रहा था, एक बहुत ही अजीब त्रुटि ने मुझे परेशान किया है।document.getElementByID एक फ़ंक्शन नहीं है

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

जब मैं रिटर्न कुंजी दबाएं करके तत्वों को जोड़ने, वहाँ कोई समस्या नहीं है यहाँ मेरी एचटीएमएल है। लेकिन जब मैं बटन सबमिट करें क्लिक करें, फिर फ़ायरबग

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 

मैं मैं कुछ समय के लिए इसे डीबग करने की कोशिश कर रहा हूं लेकिन मुझे बस यह नहीं मिला। यह शायद वास्तव में एक मूर्खतापूर्ण गलती है जिसे मैंने बनाया है। किसी भी मदद की सराहना की है।

संपादित करें: मैं Id में jQuery 1.6.1

+6

ऑफ-विषय: यदि आप jQuery, FYI सीख रहे हैं, तो आप शायद ही कभी 'document.getElementById' का उपयोग करना चाहते हैं। एक jQuery चयनकर्ता के साथ jQuery समकक्ष ['' '' (या 'jQuery') फ़ंक्शन] (http://api.jquery.com/jQuery/) है। jQuery वास्तव में कुछ ब्राउज़रों पर 'getElementById' में बग के आसपास काम करता है, इसलिए यदि आप लाइब्रेरी का उपयोग कर रहे हैं, तो * इसका उपयोग करना सबसे अच्छा है। :-) (यह नहीं कह रहा कि आपको पता नहीं होना चाहिए कि 'getElementById' क्या है, हालांकि।) –

+0

यदि आप jQuery का उपयोग कर रहे हैं तो आप क्लासिक जावास्क्रिप्ट सिंटैक्स का उपयोग क्यों कर रहे हैं i.e. getElementById। आपको $ ('# आईडी') वाक्यविन्यास का उपयोग करना चाहिए। –

उत्तर

76

यह document.getElementById() है और document.getElementByID() नहीं है। Id के लिए आवरण की जांच करें।

+1

मेरे लिए यह 'Document.getElementById() 'है – Anwar

16

यह getElementById()

नोट लोअर केस d उपयोग कर रहा हूँ।

2

यदि आप ऐसा करना चाहते हैं तो मैंने अपनी स्क्रिप्ट को 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(""); 
}; 
0

कई चीज़ें हैं जिन्हें इस के साथ गलत आप अन्य पदों में देख सकते हैं हैं, लेकिन कारण है कि आप उस त्रुटि हो रही है है, क्योंकि आप अपने प्रपत्र getElementById नाम। तो document.getElementById अब जावास्क्रिप्ट प्रदान करने वाली डिफ़ॉल्ट विधि के बजाय आपके फ़ॉर्म को इंगित करता है। एक कामकाजी डेमो 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; 
} 
संबंधित मुद्दे