ডকুমেন্ট.বাই কেন আমার জাভাস্ক্রিপ্টে নাল?

132

আমার সংক্ষিপ্ত এইচটিএমএল ডকুমেন্টটি এখানে।

ক্রোম কনসোল কেন এই ত্রুটিটি লক্ষ করছে:

"আনকাচড টাইপ এরির: মেথডের 'অ্যাপেন্ডচিল্ড' কল করতে পারবেন না null"?

<html>
<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">

        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>
</head>
<body>

</body>
</html>

javascript google-chrome

— জন হফম্যান
সূত্র

আমি গুগল ক্রোম ব্যবহার করছি।

— জন হাফম্যান

180

এই মুহুর্তে শরীরের সংজ্ঞা দেওয়া হয়নি। সাধারণভাবে, জাভাস্ক্রিপ্ট কার্যকর করার আগে আপনি সমস্ত উপাদান তৈরি করতে চান যা এই উপাদানগুলি ব্যবহার করে। এই ক্ষেত্রে আপনার headব্যবহার বিভাগে কিছু জাভাস্ক্রিপ্ট রয়েছে body। ভালো না.

আপনি একটি এই কোড মোড়ানো করতে চান window.onloadহ্যান্ডলার বা রাখুন পর<body> ট্যাগ (যেমন উল্লেখ ই-bacho 2.0 )।

<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">
      window.onload = function() {
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");
      }

    </script>
</head>

ডেমো দেখুন ।

— সার্জিও টুলেন্টেসেভ
সূত্র

1

ধন্যবাদ, তুমি কী বোঝাতে চাইছ? আমার কি বডি ট্যাগ নেই?

— জন হাফম্যান

5

পৃষ্ঠাটি উপরে থেকে নীচে এবং জাভাস্ক্রিপ্টের সাথে চালানো হয় along headকার্যকর করা হচ্ছে এমন বিভাগে আপনার কিছু জাভাস্ক্রিপ্ট রয়েছে । তবে bodyএইচটিএমএলের কিছু অংশ, সম্ভবত, এখনও ডাউনলোড করা হয়নি। অথবা এটি ডাউনলোড করা হয়েছে তবে এটি এখনও এই মুহুর্তে মূল্যায়ন করা হয়নি। সুতরাং এটি ডোমে বিদ্যমান নেই।

— সেরজিও টুলেন্টসেভ

3

আপনি যদি অন্য কোনও ফাইলে সংজ্ঞায়িত কোনও বিদ্যমান ওভারলোডকে ওভাররাইড করতে না চান?

— টম ব্রিটো

1

@TomBrito: "বা রাখুন পর<body> ট্যাগ"

— সের্গিও Tulentsev

1

কিছুটা দেরি হয়ে গেলেও শ্রোতাদের বিদ্যমান উইন্ডোগুলিকে প্রতিস্থাপন না করে উইন্ডোতে সংযুক্ত করতে অ্যাডএভেন্টলিস্টনার ব্যবহার করতে পারে।

— এডভিল্ম

36

bodyউপাদানটি এমনকি লোড হওয়ার আগেই আপনার স্ক্রিপ্টটি কার্যকর করা হচ্ছে ।

এটি কার্যকর করার কয়েকটি উপায় রয়েছে।

আপনার কোডকে একটি ডিওএম লোড কলব্যাকে মোড়ানো:

ইভেন্ট শ্রোতার জন্য আপনার যুক্তি মোড়ানো DOMContentLoaded।

এটি করার মাধ্যমে, bodyউপাদানটি লোড হয়ে গেলে কলব্যাক কার্যকর করা হবে ।
```
document.addEventListener('DOMContentLoaded', function () {
    // ...
    // Place code here.
    // ...
});
```
আপনার প্রয়োজনের উপর নির্ভর করে আপনি বিকল্পভাবে loadইভেন্ট শ্রোতাকে windowবস্তুর সাথে সংযুক্ত করতে পারেন :
```
window.addEventListener('load', function () {
    // ...
    // Place code here.
    // ...
});
```
DOMContentLoadedএবং loadইভেন্টগুলির মধ্যে পার্থক্যের জন্য , এই প্রশ্নটি দেখুন ।
আপনার <script>উপাদানটির অবস্থান সরান , এবং জাভাস্ক্রিপ্ট শেষ লোড করুন:

এখনই, আপনার দস্তাবেজের উপাদানটিতে আপনার উপাদান <script>লোড হচ্ছে <head>। এর অর্থ bodyএটি লোড হওয়ার আগেই এটি কার্যকর করা হবে । গুগল বিকাশকারীরা<script> আপনার পৃষ্ঠার শেষের দিকে ট্যাগগুলি সরাতে পরামর্শ দেয় যাতে জাভাস্ক্রিপ্ট প্রক্রিয়া করার আগে সমস্ত HTML সামগ্রী রেন্ডার করা হয় content
```
<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some paragraph</p>
  

  <script>
    
  </script>
</body>
</html>
```

— জোশ ক্রোজিয়ার
সূত্র

2

আমি মনে করি এটি গৃহীত উত্তরের চেয়ে আরও পুঙ্খানুপুঙ্খ এবং বর্তমান।

— TheUiderSide

8

লোড ইভেন্টে আপনার কোড যুক্ত করুন। গৃহীত উত্তরগুলি এটি সঠিকভাবে দেখায়, তবে সেই উত্তরের পাশাপাশি লেখার সময় অন্য সমস্তরাও বদ্ধ ট্যাগের পরে স্ক্রিপ্ট ট্যাগ রাখার পরামর্শ দেয়,।

এটি বৈধ এইচটিএমএল নয়। তবে এটি আপনার কোডকে কাজ করতে সাহায্য করবে, কারণ ব্রাউজারগুলি খুব দয়ালু;)

আরও তথ্যের জন্য এই উত্তরটি দেখুন <<<> ট্যাগের পরে <script> ট্যাগ স্থাপন করা কি ভুল?

এই কারণে অন্যান্য উত্তরকে অগ্রাহ্য করেছেন।

— মার্টিন হ্যানসেন
সূত্র

4

অথবা এই অংশটি যুক্ত করুন

<script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>

এইচটিএমএল পরে, মত:

    <html>
    <head>...</head>
    <body>...</body>
   <script type="text/javascript">
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>

    </html>

— বরিস বাচভস্কি
সূত্র

1

ব্রাউজার উপরে থেকে নীচে থেকে আপনার এইচটিএমএলকে বিশ্লেষণ করে, আপনার স্ক্রিপ্ট বডি লোড হওয়ার আগে চলে। শরীরের পরে পুস্তক স্থির করা।

  <html>
  <head>
       <title> Javascript Tests </title> 
  </head>
 <body>
 </body>
  <script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>
</html>

— ইমানুয়েল এন
সূত্র

0

document.body যখন আপনার কোডটি চালিত হয় তখন এটি উপলভ্য নয়।

পরিবর্তে আপনি যা করতে পারেন:

var docBody=document.getElementsByTagName("body")[0];
docBody.appendChild(mySpan);

— ক্রিস্টোফ
সূত্র

@ জ্যাক আপনি আরও নির্দিষ্ট হতে পারে? ব্রাউজার / সংস্করণের কোনও উদাহরণ যেখানে এটি কাজ করে না?

— ক্রিস্টোফ

ক্রোম @ 39 এবং ফায়ারফক্স @ 33

— জ্যাক

@ জ্যাক ঠিক আছে, সুতরাং লেখার সময় আমার উত্তরটি সঠিক ছিল ;-) আমাকে সতর্ক করার জন্য ধন্যবাদ, আমি কিছু পরীক্ষা করব এবং একটি আপডেট পোস্ট করব।

— ক্রিস্টোফ

ডকুমেন্ট.বাই কেন আমার জাভাস্ক্রিপ্টে নাল?

আপনার কোডকে একটি ডিওএম লোড কলব্যাকে মোড়ানো:

আপনার <script>উপাদানটির অবস্থান সরান , এবং জাভাস্ক্রিপ্ট শেষ লোড করুন:

আপনার `<script>`উপাদানটির অবস্থান সরান , এবং জাভাস্ক্রিপ্ট শেষ লোড করুন: