2012-03-24 18 views
22

की विधि 'addEventListener' को कॉल नहीं कर सकता है, मैं कुछ सरल करने की कोशिश कर रहा हूं, लेकिन शायद मेरे कारण शायद दस्तावेज़ों को खोजने के लिए पर्याप्त नहीं है, मैं इसे काम नहीं कर सकता। मैं जे एस अलग करने के कोशिश कर रहा हूँजावास्क्रिप्ट: Uncaught TypeError: शून्य

<A title="Wolfram IP Calc" href="javascript:txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');%20if(txt)%20window.open('http://www.wolframalpha.com/input/?i='+txt);void(O);">Compute!</A> 

विभिन्न कारणों से, और यह वह जगह है जहाँ मैं कोई समस्या हुई:

मैं एक कार्य इनलाइन जेएस है कि इस तरह दिखता है।

मैं निम्नलिखित परीक्षण पृष्ठ है कि मुझे त्रुटि Uncaught TypeError: Cannot call method 'addEventListener' of null देता बना लिया है:

<HTML> <HEAD profile="http://www.w3.org/2005/10/profile"> <script type="text/javascript"> 
var compute = document.getElementById('compute'); 
compute.addEventListener('click', computeThatThing, false); 

function computeThatThing() { 
    txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5'); 
    if(txt) { 
     window.open('http://www.wolframalpha.com/input/?i='+txt); 
    } 
} 
</script></HEAD> 
<BODY> 
<A title="Wolfram IP Calc" id="compute" href="javascript:void(O);">Test</A> 
</BODY> 
</HTML> 

केवल एक चीज मुझे लगता है कि addEventListener काम नहीं कर सकता है कि इस तरह एक समस्या के लिए अंक प्राप्त करने में सक्षम किया गया है उनका कहना है कि मैं क्या 'के लिए पहले से

<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" /> 

धन्यवाद: <A> साथ लेकिन <IMG> संभाल चाहिए (जो मुझे ठीक सूट के रूप में मैं कुछ चित्रों पर इस डाल करने के लिए जा रहा हूँ), इसलिए मैं कोई लाभ नहीं हुआ निम्नलिखित जोड़ने की कोशिश की मैं गलत कर रहा हूँ यह शायद चमकदार रूप से स्पष्ट है, लेकिन मेरे पास जेएस के साथ शून्य अनुभव है और मैं अब तक कार्गो संस्कृति द्वारा चला गया हूं जब मुझे इसकी आवश्यकता है।

+0

उपयोग Jquery। $ (दस्तावेज़) .ready (function() {<डोम तैयार होने पर यहां सबकुछ लोड हो जाता है>}); – PhillipKregg

+1

@PhillipKregg, मुझे लगता है कि मेरी परियोजना में Jquery जोड़ना आवश्यक जटिलता और लोड समय जोड़ देगा। – Jan

+0

@PhillipKregg यह विशेष रूप से एक प्रोजेक्ट के लिए है जहां सब कुछ एक फ़ाइल में निहित है, जिसमें बेस 64 एन्कोडेड छवियां शामिल हैं, ताकि इसमें कोई बाहरी निर्भरता न हो। – Jan

उत्तर

54

आपका कोड में है <head> => चलाता से पहले तत्वों,, इसलिए document.getElementById('compute'); रिटर्न अशक्त गाया जाता है MDN वादा के रूप में ...

element = document.getElementById(id);
element is a reference to an Element object, or null if an element with the specified ID is not in the document.

MDN

समाधान:

  1. स्क्रिप्ट को पृष्ठ के नीचे रखें।
  2. लोड ईवेंट में अटैच कोड को कॉल करें।
  3. jQuery लाइब्रेरी का उपयोग करें और यह डोम तैयार घटना है।

jQuery ready ईवेंट क्या है?

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers...
...

readydocs

+1

धन्यवाद 'gdoron'! समाधान 1 बल्ले से ठीक काम किया। मैं ईमानदारी से हैरान हूं कि यह सरल और लगभग सहज था। अब मेरे उत्पादन कोड तोड़ने पर! :) – Jan

+0

मॉरिस चार्ट को लागू करते समय मुझे एक ही समस्या का सामना करना पड़ रहा है। और मैंने यह सब किया है और अभी भी कोई उम्मीद नहीं है। – Abhinav

संबंधित मुद्दे