Không thể đặt thuộc tính 'innerHTML' là null

Question 1

Tại sao tôi gặp lỗi hoặc Uncaught TypeError: Không thể đặt thuộc tính 'innerHTML' là null? Tôi nghĩ rằng tôi đã hiểu InternalHTML và nó đã hoạt động trước đó.

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

Bạn phải đặt hellodiv trước tập lệnh để nó tồn tại khi tập lệnh được tải.

Question 3

Trước tiên, chúng ta hãy cố gắng tìm hiểu nguyên nhân gốc rễ tại sao nó lại xảy ra ngay từ đầu.

Tại sao tôi gặp lỗi hoặc Uncaught TypeError: Không thể đặt thuộc tính 'innerHTML' là null?

Trình duyệt luôn tải toàn bộ HTML DOM từ trên xuống dưới. Bất kỳ mã JavaScript nào được viết bên trong các scriptthẻ (có trong headphần của tệp HTML của bạn) sẽ được thực thi bởi công cụ hiển thị của trình duyệt ngay cả trước khi toàn bộ DOM của bạn (các thẻ phần tử HTML khác nhau có trong thẻ body) được tải. Các tập lệnh có trong headthẻ đang cố gắng truy cập một phần tử có id hellongay cả trước khi nó thực sự được hiển thị trong DOM. Vì vậy, rõ ràng là JavaScript không thể nhìn thấy phần tử và do đó bạn sẽ thấy lỗi tham chiếu rỗng.

Làm thế nào bạn có thể làm cho nó hoạt động như trước đây?

Bạn muốn hiển thị thông báo "xin chào" trên trang ngay khi người dùng truy cập vào trang của bạn lần đầu tiên. Vì vậy, bạn cần kết nối mã của mình tại một thời điểm khi bạn hoàn toàn chắc chắn về thực tế rằng DOM đã được tải đầy đủ và hellophần tử id có thể truy cập / có sẵn. Nó có thể đạt được theo hai cách:

Sắp xếp lại các tập lệnh của bạn : Bằng cách này, các tập lệnh của bạn chỉ được kích hoạt sau khi DOM chứa hellophần tử id của bạn đã được tải. Bạn có thể đạt được nó bằng cách chỉ cần di chuyển thẻ script sau tất cả các phần tử DOM, tức là ở cuối nơi bodythẻ kết thúc. Vì kết xuất diễn ra từ trên xuống dưới nên cuối cùng các tập lệnh của bạn sẽ được thực thi và bạn không gặp lỗi.

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

Mở rộng đoạn mã

Sử dụng kết nối sự kiện : Công cụ kết xuất của trình duyệt cung cấp một móc nối dựa trên window.onloadsự kiện thông qua sự kiện cho bạn gợi ý rằng trình duyệt đã tải xong DOM. Vì vậy, vào thời điểm sự kiện này được kích hoạt, bạn có thể yên tâm rằng phần tử của bạn có helloid đã được tải trong DOM và bất kỳ JavaScript nào được kích hoạt sau đó cố gắng truy cập phần tử này sẽ không thất bại. Vì vậy, bạn làm một cái gì đó như đoạn mã dưới đây. Xin lưu ý rằng trong trường hợp này, tập lệnh của bạn hoạt động ngay cả khi nó xuất hiện ở đầu tài liệu HTML bên trong headthẻ.

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

Mở rộng đoạn mã

Question 4

Bạn có thể yêu cầu javascript thực hiện hành động "onload" ... Hãy thử với điều này:

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

Question 5

Chỉ cần đưa JS của bạn vào window.onload

window.onload = function() {

        what();

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

    }

Question 6

Phần JavaScript cần chạy khi trang được tải, do đó, bạn nên đặt tập lệnh JavaScript ở cuối thẻ body.

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

Mở rộng đoạn mã

Question 7

Javascript có vẻ tốt. Cố gắng chạy nó sau khi div được tải. Cố gắng chỉ chạy khi tài liệu đã sẵn sàng. $(document).readytrong 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>

Mở rộng đoạn mã

Question 9

Đây là đoạn mã của tôi hãy thử nó. Tôi hy vọng nó sẽ hữu ích cho bạn.

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

Mở rộng đoạn mã

Question 10

Bạn có thể thử sử dụng phương thức setTimeout để đảm bảo html của bạn tải trước.

Question 11

Nguyên nhân gốc rễ là: HTML trên một trang phải được tải trước mã javascript . Giải quyết theo 2 cách:

1) Cho phép tải HTML trước mã 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) Di chuyển mã js dưới mã 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>

Mở rộng đoạn mã

Question 13

Tôi đã gặp vấn đề tương tự và hóa ra lỗi null là do tôi chưa lưu html mà tôi đang làm việc.

Nếu phần tử được tham chiếu đến chưa được lưu khi trang được tải là 'null', vì tài liệu không chứa nó tại thời điểm tải. Sử dụng window.onload cũng giúp gỡ lỗi.

Tôi hy vọng điều này hữu ích cho bạn.

Question 14

Lỗi này có thể xuất hiện ngay cả khi bạn tải tập lệnh của mình sau khi kết xuất html hoàn tất. Trong ví dụ cụ thể này, mã của bạn

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

không có giá trị bên trong div. Vì vậy, lỗi được nâng lên, bởi vì không có giá trị để thay đổi bên trong. Nó đáng lẽ phải

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

sau đó.

Question 15

Thêm jquery vào < head>

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

Sử dụng $ document.ready () : mã có thể nằm trong < head>hoặc trong một tệp riêng biệt như main.js

1) sử dụng js trong cùng một tệp (thêm cái này vào < head>):

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

2) sử dụng một số tệp khác như main.js (thêm tệp này vào < head>):

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

và thêm mã vào tệp main.js :)

Question 16

Bạn cần phải thay đổi divthành p. Về mặt kỹ thuật, bên trongHTML có nghĩa là nó nằm bên trong <??? id=""></???>một phần.

Thay đổi:

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

thành

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

Đang làm:

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

sẽ biến

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

mà thực sự không có ý nghĩa.

Bạn cũng có thể thử thay đổi:

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

vào cái này

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

Để làm cho nó hoạt động.

Question 17

Lỗi tự giải thích là không nhận được thẻ HTML trong đó Bạn muốn đặt Dữ liệu Vì vậy, hãy cung cấp thẻ cho JS thì chỉ Bạn mới có thể đặt Dữ liệu thành đó.

Question 18

Không nghi ngờ gì nữa, hầu hết các câu trả lời ở đây đều đúng, nhưng bạn cũng có thể làm điều này:

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

Question 19

Có nhiều nguyên nhân khác nhau có thể xảy ra như đã thảo luận, chỉ muốn thêm điều này cho một người nào đó có thể có cùng vấn đề như tôi.

Trong trường hợp của tôi, tôi đã thiếu một div đóng như hình dưới đây

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

Việc thiếu một div đóng có thể dẫn đến việc chuyển đổi từ con sang cha mẹ hoặc cha mẹ sang con một cách vô tổ chức do đó dẫn đến lỗi khi bạn cố gắng truy cập một phần tử trong DOM

Question 20

Để DOM tải. Để làm điều gì đó trong DOM, bạn phải tải nó trước. Trong trường hợp của bạn, bạn phải tải <div>thẻ trước. sau đó bạn có một cái gì đó để sửa đổi. nếu bạn tải js đầu tiên thì hàm đó đang tìm kiếm bạn HTMLđể làm những gì bạn yêu cầu, nhưng khi thời điểm đó của bạn HTMLđang tải và hàm của bạn không thể tìm thấy HTML. Vì vậy, bạn có thể đặt script ở cuối trang. bên trong <body>thì hàm có thể truy cập vào <div>Bởi vì DOM đã được tải vào thời điểm bạn nhấn tập lệnh.