ไม่สามารถตั้งค่าคุณสมบัติ 'innerHTML' ของ null

Question 1

เหตุใดฉันจึงได้รับข้อผิดพลาดหรือ Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติ 'innerHTML' ของ null ได้ ฉันคิดว่าฉันเข้าใจ innerHTML และเคยทำงานมาก่อน

<!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

คุณต้องวางhellodiv ก่อนสคริปต์เพื่อให้มีอยู่เมื่อโหลดสคริปต์

Question 3

ก่อนอื่นให้เราพยายามทำความเข้าใจสาเหตุที่แท้จริงว่าเหตุใดจึงเกิดขึ้นตั้งแต่แรก

เหตุใดฉันจึงได้รับข้อผิดพลาดหรือ Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติ 'innerHTML' ของ null ได้

เบราว์เซอร์จะโหลด HTML DOM ทั้งหมดจากบนลงล่างเสมอ โค้ด JavaScript ใด ๆ ที่เขียนภายในscriptแท็ก (อยู่ในheadส่วนของไฟล์ HTML ของคุณ) จะถูกเรียกใช้โดยเอ็นจินการเรนเดอร์ของเบราว์เซอร์ก่อนที่ DOM ทั้งหมดของคุณ (แท็กองค์ประกอบ HTML ต่างๆที่อยู่ในแท็กเนื้อหา) จะถูกโหลด สคริปต์ที่มีอยู่ในheadแท็กพยายามเข้าถึงองค์ประกอบที่มี id helloก่อนที่จะมีการแสดงผลจริงใน DOM เห็นได้ชัดว่า JavaScript ไม่เห็นองค์ประกอบและด้วยเหตุนี้คุณจึงเห็นข้อผิดพลาดอ้างอิงว่าง

คุณจะทำให้มันทำงานเหมือนเดิมได้อย่างไร?

คุณต้องการแสดงข้อความ "สวัสดี" บนเพจทันทีที่ผู้ใช้เข้ามาที่เพจของคุณเป็นครั้งแรก ดังนั้นคุณต้องเชื่อมต่อโค้ดของคุณ ณ จุดที่คุณแน่ใจอย่างสมบูรณ์ว่า DOM โหลดเต็มที่และhelloองค์ประกอบ id สามารถเข้าถึงได้ / พร้อมใช้งาน ทำได้สองวิธี:

จัดลำดับสคริปต์ของคุณใหม่ : วิธีนี้สคริปต์ของคุณจะเริ่มทำงานหลังจากโหลด DOM ที่มีhelloองค์ประกอบ id ของคุณแล้วเท่านั้น คุณสามารถทำได้โดยเพียงแค่ย้ายแท็กสคริปต์หลังจากองค์ประกอบ 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เหตุการณ์ผ่านเหตุการณ์ซึ่งให้คำใบ้ว่าเบราว์เซอร์โหลด DOM เสร็จแล้ว ดังนั้นเมื่อถึงเวลาที่เหตุการณ์นี้เริ่มทำงานคุณสามารถมั่นใจได้ว่าองค์ประกอบของคุณที่มีhelloid โหลดอยู่แล้วใน DOM และ JavaScript ที่เริ่มทำงานหลังจากนั้นซึ่งพยายามเข้าถึงองค์ประกอบนี้จะไม่ล้มเหลว คุณจึงทำบางอย่างเช่นด้านล่างข้อมูลโค้ด โปรดทราบว่าในกรณีนี้สคริปต์ของคุณจะทำงานแม้ว่าจะอยู่ที่ด้านบนสุดของเอกสาร HTMLภายในheadแท็กก็ตาม

<!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

คุณสามารถบอกให้จาวาสคริปต์ดำเนินการ "onload" ได้ ... ลองทำดังนี้

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

Question 5

เพียงใส่ JS ของคุณเข้าไป window.onload

window.onload = function() {

        what();

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

    }

Question 6

ส่วน JavaScript ต้องทำงานเมื่อโหลดเพจแล้วจึงขอแนะนำให้วางสคริปต์ JavaScript ไว้ท้ายแท็กเนื้อหา

<!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

Javascript ดูดี ลองรันหลังจากโหลด div เสร็จแล้ว พยายามเรียกใช้เมื่อเอกสารพร้อมเท่านั้น $(document).readyใน jquery

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

คุณสามารถลองใช้เมธอด setTimeout เพื่อให้แน่ใจว่า html ของคุณโหลดก่อน

Question 11

สาเหตุที่แท้จริงคือHTML บนเพจต้องโหลดก่อนโค้ดจาวาสคริปต์บนหน้าเว็บได้ที่จะโหลดก่อนรหัสจาวาสคริปต์ แก้ไขได้ 2 วิธี:

1) อนุญาตให้โหลด HTML ก่อนโค้ด js

<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) ย้ายโค้ด js ภายใต้โค้ด HTML

<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 ที่ฉันใช้งานอยู่

หากองค์ประกอบที่อ้างถึงไม่ได้รับการบันทึกเมื่อโหลดเพจแล้วเป็น "null" เนื่องจากเอกสารไม่มีอยู่ในขณะโหลด การใช้ 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ไฟล์. ในทางเทคนิค innerHTML หมายความว่าอยู่ภายในไฟล์<??? 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

มีสาเหตุที่เป็นไปได้ที่แตกต่างกันตามที่กล่าวไว้คือต้องการเพิ่มสิ่งนี้สำหรับคนที่อาจมีปัญหาเดียวกันกับของฉัน

ในกรณีของฉันฉันมี div ระยะใกล้ที่หายไปดังที่แสดงด้านล่าง

   <!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>

การไม่มี div ที่ใกล้เคียงอาจส่งผลให้เกิดความไม่เป็นระเบียบของการขวางจากเด็กไปยังผู้ปกครองหรือผู้ปกครองถึงเด็กจึงทำให้เกิดข้อผิดพลาดเมื่อคุณพยายามเข้าถึงองค์ประกอบใน DOM

Question 20

ปล่อยให้ DOM โหลด ในการทำบางสิ่งใน DOM คุณต้องโหลดก่อน ในกรณีของคุณคุณต้องโหลด<div>แท็กก่อน คุณมีบางอย่างที่ต้องแก้ไข หากคุณโหลด js ก่อนฟังก์ชันนั้นจะต้องการHTMLให้คุณทำสิ่งที่คุณขอให้ทำ แต่เมื่อถึงเวลานั้นคุณHTMLกำลังโหลดและฟังก์ชันของคุณไม่พบไฟล์HTML. คุณสามารถวางสคริปต์ไว้ที่ด้านล่างของหน้าได้ ภายใน<body>แท็กจากนั้นฟังก์ชันสามารถเข้าถึงได้<div>เนื่องจาก DOM ถูกโหลดแล้วเมื่อคุณกดสคริปต์