2013-07-18 15 views
5

मैं एक increbily साधारण घटना श्रोता लिखा है और अभी तक यह त्रुटि के साथ आता है: Uncaught TypeError: Cannot call method 'addEventListener' of null जिससे पता चलता है कि यह आईडी हो सकता है के साथ क्या करना है (यह भी साथ काम करता है documentसरल घटना श्रोता काम नहीं कर रहा - जे एस

<html> 
<head> 
    <script type="text/javascript"> 
     function message() { 
     alert("Hello!"); 
     } 
     var button = document.getElementById('button'); 
     button.addEventListener('click', message, true); 
    </script> 
</head> 
<body> 
    <input type="button" id="button" value="Click me!" /> 
</body> 
</html> 
?

(मुझे पता है कि मैं इसके बाद बेवकूफ महसूस करने जा रहा हूं, लेकिन मैं जेएस नोब हूं)

+0

'' से ऊपर अपने शरीर अनुभाग के निचले हिस्से में स्क्रिप्ट अनुभाग को रखें, जिस तत्व का आप संदर्भ दे रहे हैं वह अभी तक लोड नहीं हुआ था। –

+0

बिंगो! लेकिन मैंने सोचा कि लिपि सिर में चली गई है? – user2594377

+0

ज्यादातर मामलों में बॉडी सेक्शन के नीचे डालने का सबसे अच्छा अभ्यास है - जब तक कि आप उन्हें तत्वों को लोड करने के लिए _before_ चलाने के लिए नहीं चाहते हैं। –

उत्तर

10

आपकी स्क्रिप्ट निष्पादित होने पर एस, डीओएम नहीं बनाया गया है। आप एचटीएमएल पढ़ने के बाद इसे चलाने के लिए बॉडी टैग के बाद अपनी स्क्रिप्ट डाल सकते हैं - लेकिन ऐसा करने का बेहतर तरीका DOMContentLoaded सुनकर है।

document.addEventListener('DOMContentLoaded', init, false); 
function init(){ 
    function message() { 
    alert("Hello!"); 
    } 
    var button = document.getElementById('button'); 
    button.addEventListener('click', message, true); 
}; 

window.onload = init भी काम करता है। मुझे यह पसंद नहीं है क्योंकि ऐसा लगता है कि एक स्क्रिप्ट खिड़की को ओवरराइट कर सकती है। अपने स्वयं के इनिट फ़ंक्शन के रूप में लोड करें। (मैंने पुष्टि नहीं की है कि ऐसा होता है या नहीं)

+0

बिल्कुल सही धन्यवाद! – user2594377

+0

आपका स्वागत है! शुभकामनाएं जेएस में आपका स्वागत है – Plato

2

क्योंकि इस स्क्रिप्ट को तब तक निष्पादित किया जाता है जब शरीर अभी तक लोड नहीं होता है। ऑनलोड ईवेंट का उपयोग करें, और उसके भीतर अपना कोड पेस्ट करें।

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