अशक्त की संपत्ति 'आंतरिक HTML' सेट नहीं कर सकता

Question 1

मुझे एक त्रुटि या अनकैप्ड TypeError क्यों मिलता है: नल की संपत्ति 'आंतरिक HTML' सेट नहीं कर सकता? मुझे लगा कि मैं इनरएचटीएमएल को समझ गया हूं और इसके पहले काम कर रहा हूं।

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>

Question 2

आपको helloस्क्रिप्ट से पहले div को रखना होगा , ताकि स्क्रिप्ट लोड होने पर यह मौजूद रहे।

Question 3

आइए पहले हम मूल कारण को समझने की कोशिश करें कि यह पहली जगह में क्यों हो रहा है।

मुझे एक त्रुटि या अनकैप्ड TypeError क्यों मिलता है: नल की संपत्ति 'आंतरिक HTML' सेट नहीं कर सकता?

ब्राउज़र हमेशा पूरे HTML DOM को ऊपर से नीचे तक लोड करता है। scriptटैग के अंदर लिखा गया कोई भी जावास्क्रिप्ट कोड ( headआपकी HTML फ़ाइल के अनुभाग में मौजूद ) ब्राउज़र रेंडरिंग इंजन द्वारा आपके पूरे DOM (शरीर टैग के भीतर मौजूद विभिन्न HTML तत्व टैग) लोड होने से पहले ही निष्पादित हो जाता है। headटैग में मौजूद स्क्रिप्ट किसी ऐसे तत्व को एक्सेस करने की कोशिश कर रही हैं, जो helloइससे पहले भी वास्तव में DOM में दे चुका है। तो जाहिर है, जावास्क्रिप्ट तत्व को देखने में विफल रहा और इसलिए आप अशक्त संदर्भ त्रुटि को देखते हुए समाप्त होते हैं।

आप इसे पहले की तरह कैसे काम कर सकते हैं?

आप पृष्ठ पर "ही" संदेश दिखाना चाहते हैं जैसे ही उपयोगकर्ता आपके पृष्ठ पर पहली बार लैंड करता है। इसलिए आपको एक बिंदु पर अपने कोड को हुक करने की आवश्यकता है जब आप इस तथ्य से पूरी तरह से आश्वस्त हो जाएं कि डोम पूरी तरह से भरा हुआ है और helloआईडी तत्व सुलभ / उपलब्ध है। यह दो तरीकों से प्राप्त करने योग्य है:

अपनी स्क्रिप्ट को फिर से व्यवस्थित करें : इस तरह से आपकी स्क्रिप्ट तब ही फायर हो जाती है जब DOM आपकी helloid एलिमेंट लोड कर चुका होता है। आप इसे सभी DOM तत्वों के बाद स्क्रिप्ट टैग को ले जाकर प्राप्त कर सकते हैं, यानी नीचे जहां bodyटैग समाप्त हो रहा है। चूंकि प्रतिपादन ऊपर से नीचे तक होता है, इसलिए आपकी स्क्रिप्ट अंत में निष्पादित हो जाती हैं और आपको कोई त्रुटि नहीं होती है।

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="hello"></div>
    
    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>

स्निपेट का विस्तार करें

ईवेंट हुकिंग का उपयोग करें : ब्राउज़र का रेंडरिंग इंजन ईवेंट के माध्यम से एक ईवेंट आधारित हुक प्रदान करता है window.onloadजो आपको संकेत देता है कि ब्राउज़र ने डोम लोड करना समाप्त कर दिया है। इसलिए जब तक इस घटना को निकाल दिया जाता है, तब तक आप निश्चिंत रह सकते हैं कि आपके तत्व को helloपहले से ही DOM में लोड किया गया है और उसके बाद कोई भी जावास्क्रिप्ट निकाल दिया गया है जो इस तत्व तक पहुंचने की कोशिश नहीं करेगा। तो आप नीचे कोड स्निपेट जैसा कुछ करें। कृपया ध्यान दें कि इस मामले में, आपकी स्क्रिप्ट काम करती है, भले ही यहhead टैग के अंदर आपके HTML दस्तावेज़ के शीर्ष पर मौजूद हो ।

<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>
        
        <body>
        <div id="hello"></div>
        </body>
        </html>

स्निपेट का विस्तार करें

Question 4

आप जावास्क्रिप्ट को कार्रवाई "ऑनलोड" करने के लिए कह सकते हैं ... इसके साथ प्रयास करें:

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>

Question 5

बस अपने जेएस में डाल दिया window.onload

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }

Question 6

पृष्ठ के लोड होने के बाद जावास्क्रिप्ट भाग को चलाने की आवश्यकता होती है, इसलिए शरीर के टैग के अंत में जावास्क्रिप्ट स्क्रिप्ट लगाने की सलाह दी जाती है।

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>  
</body>
</html>

स्निपेट का विस्तार करें

Question 7

जावास्क्रिप्ट अच्छी लगती है। Div लोड होने के बाद इसे चलाने का प्रयास करें। दस्तावेज़ तैयार होने पर ही चलाने का प्रयास करें। $(document).readyjquery में।

Question 8

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>  
</body>
</html>

स्निपेट का विस्तार करें

Question 9

यहाँ मेरा स्निपेट इसे आज़मा रहा है। मुझे उम्मीद है कि यह यू के लिए उपयोगी होगा।

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>

स्निपेट का विस्तार करें

Question 10

आप यह सुनिश्चित करने के लिए कि आपके html पहले लोड करते हैं, सेटटाइमआउट विधि का उपयोग करने की कोशिश कर सकते हैं।

Question 11

मूल कारण है: एक पृष्ठ पर HTML को जावास्क्रिप्ट कोड से पहले लोड किया जाना है । 2 तरीकों से हल करना:

1) js कोड से पहले HTML लोड की अनुमति दें।

<script type ="text/javascript">
    window.onload = function what(){
        document.getElementById('hello').innerHTML = 'hi';
    }
</script>

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2) HTML कोड के तहत js कोड को स्थानांतरित करें

<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

Question 12

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>

स्निपेट का विस्तार करें

Question 13

मुझे एक ही समस्या है और यह पता चला है कि अशक्त त्रुटि थी क्योंकि मैंने उस html को नहीं बचाया था जिसके साथ मैं काम कर रहा था।

यदि पृष्ठ लोड होने के बाद संदर्भित तत्व को सहेजा नहीं गया है, तो 'शून्य' है, क्योंकि दस्तावेज़ में लोड के समय यह शामिल नहीं है। Window.onload का उपयोग डिबगिंग में भी मदद करता है।

मुझे आशा है कि यह आपके लिए उपयोगी था।

Question 14

यदि आप HTML रेंडर समाप्त होने के बाद अपनी स्क्रिप्ट लोड करते हैं तो भी यह त्रुटि दिखाई दे सकती है। इस दिए गए उदाहरण में आपका कोड

<div id="hello"></div>

div के अंदर कोई मूल्य नहीं है। तो त्रुटि को उठाया जाता है, क्योंकि अंदर बदलने के लिए कोई मूल्य नहीं है। इसे होना चाहिए था

<div id="hello">Some random text to change</div>

फिर।

Question 15

Jquery को इसमें जोड़ें < head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

$ Document.ready () का उपयोग करें : कोड < head>main.js की तरह एक अलग फ़ाइल में या अंदर हो सकता है

1) उसी फ़ाइल में js का उपयोग करके (इसमें जोड़ें < head>):

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2) कुछ अन्य फ़ाइल जैसे main.js (इसे इसमें जोड़ें) का उपयोग कर < head>:

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

और main.js फ़ाइल में कोड जोड़ें :)

Question 16

divमें बदलने की जरूरत है p। तकनीकी रूप से आंतरिक HTML का मतलब है कि यह <??? id=""></???>भाग के अंदर है ।

परिवर्तन:

<div id="hello"></div>

में

<p id="hello"></p>

करते हुए:

document.getElementById('hello').innerHTML = 'hi';

मुड़ेगा

<div id="hello"></div> into this <div id="hello">hi</div>

जिसका वास्तव में कोई मतलब नहीं है।

आप बदलने की कोशिश भी कर सकते हैं:

document.getElementById('hello').innerHTML = 'hi';

इस मामले में

document.getElementById('hello').innerHTML='<p> hi </p> ';

यह काम करने के लिए।

Question 17

त्रुटि स्व-व्याख्या कर रही है कि इसमें HTML टैग नहीं मिल रहा है जिसमें आप डेटा को सेट करना चाहते हैं इसलिए JS को टैग उपलब्ध कराएं, उसके बाद ही आप डेटा सेट कर सकते हैं।

Question 18

इसमें कोई संदेह नहीं है, यहाँ अधिकांश उत्तर सही हैं, लेकिन आप यह भी कर सकते हैं:

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});

Question 19

अलग-अलग संभावित कारण हैं क्योंकि चर्चा किसी ऐसे व्यक्ति के लिए जोड़ना चाहेंगे, जिसके पास मेरा एक ही मुद्दा हो सकता है।

मेरे मामले में मेरे पास एक लापता क्लोज़ था जैसा कि नीचे दिखाया गया है

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Untitled Document</title>
   </head>
   <body>
   <div> //I am an open div
    <div id="hello"></div>
   <script type ="text/javascript">
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
   </script>
   </body>
   </html>

एक करीबी दोस्त को मिस करने से बच्चे से माता-पिता या माता-पिता से बच्चे को ट्रांसवर्सल की गड़बड़ी हो सकती है, इसलिए जब आप DOM में किसी तत्व को एक्सेस करने का प्रयास करते हैं तो एक त्रुटि उत्पन्न होती है।

Question 20

DOM को लोड होने दें। DOM में कुछ करने के लिए आपको पहले इसे लोड करना होगा। आपके मामले में आपको <div>पहले टैग को लोड करना होगा । तो आपके पास संशोधित करने के लिए कुछ है। यदि आप पहले js को लोड करते हैं तो वह फ़ंक्शन आपके द्वारा वह HTMLकरने के लिए कह रहा है जो आपने करने के लिए कहा था, लेकिन उस समय जब आपका HTMLलोड हो रहा हो और आपका फ़ंक्शन कैंट न हो HTML। तो आप स्क्रिप्ट को पेज के निचले भाग में रख सकते हैं। <body>टैग के अंदर तब फ़ंक्शन पहुंच सकता है <div>क्योंकि स्क्रिप्ट हिट करने का समय डोम पहले से ही भरा हुआ है।