Tak dapat menyetel properti 'innerHTML' dari nol

97

Mengapa saya mendapatkan error atau Uncaught TypeError: Tidak dapat menyetel properti 'innerHTML' dari null? Saya pikir saya mengerti innerHTML dan sudah berfungsi sebelumnya.

<!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>
javascript  onload  innerhtml 
— Joshua W.
sumber

Jawaban:

171

Anda harus menempatkan hellodiv sebelum skrip, sehingga div ada saat skrip dimuat.

— Erik Godard
sumber
18
Jika Anda menggunakan window.onload = function name () {} tidak masalah jika div sebelum atau sesudah.
— Colyn1337
1
Solusi renyah. Tapi saya masih mendapatkan kesalahannya. Di chrome / fedora 25 / apache
— Sahu V Kumar
48

Pertama-tama, mari kita coba memahami akar penyebab mengapa hal itu terjadi.

Mengapa saya mendapatkan error atau Uncaught TypeError: Tidak dapat menyetel properti 'innerHTML' dari null?

Browser selalu memuat seluruh DOM HTML dari atas ke bawah. Kode JavaScript apa pun yang ditulis di dalam scripttag (ada di headbagian file HTML Anda) dijalankan oleh mesin rendering browser bahkan sebelum seluruh DOM Anda (berbagai tag elemen HTML ada di dalam tag body) dimuat. Skrip yang ada dalam headtag mencoba mengakses elemen yang memiliki id hellobahkan sebelum benar-benar dirender di DOM. Jadi jelas, JavaScript gagal melihat elemen dan karenanya Anda akhirnya melihat kesalahan referensi nol.

Bagaimana Anda bisa membuatnya berfungsi seperti sebelumnya?

Anda ingin menampilkan pesan "hai" di halaman segera setelah pengguna membuka halaman Anda untuk pertama kalinya. Jadi, Anda perlu menghubungkan kode Anda pada titik ketika Anda benar-benar yakin dengan fakta bahwa DOM telah dimuat sepenuhnya dan helloelemen id dapat diakses / tersedia. Ini dapat dicapai dengan dua cara:

  1. Susun ulang skrip Anda : Dengan cara ini skrip Anda diaktifkan hanya setelah DOM yang berisi helloelemen id Anda sudah dimuat. Anda dapat mencapainya hanya dengan memindahkan tag script setelah semua elemen DOM yaitu di bagian bawah di mana bodytag diakhiri. Karena rendering terjadi dari atas ke bawah sehingga skrip Anda dieksekusi pada akhirnya dan Anda tidak menghadapi kesalahan.

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

  1. Gunakan event hooking : Mesin rendering browser menyediakan hook berbasis window.onloadevent melalui event yang memberi Anda petunjuk bahwa browser telah selesai memuat DOM. Jadi pada saat peristiwa ini diaktifkan, Anda dapat yakin bahwa elemen Anda dengan helloid sudah dimuat di DOM dan JavaScript apa pun yang diaktifkan setelahnya yang mencoba mengakses elemen ini tidak akan gagal. Jadi Anda melakukan sesuatu seperti cuplikan kode di bawah ini. Harap perhatikan bahwa dalam kasus ini, skrip Anda berfungsi meskipun ada di bagian atas dokumen HTML Anda di dalam headtag.

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

— NSP
sumber
Bagus, tapi saya akan menambahkan, saya tidak berpikir fungsi yang melakukan document.getElementById (..). InnerHTML. perlu dimasukkan ke dalam muatan. Karena itu bisa dimuat sebelum DOM dimuat dan tidak ada kesalahan. Hanya panggilannya yang perlu. jsfiddle.net/fbz6wLpd/8
— barlop
40

Anda dapat memberi tahu javascript untuk melakukan tindakan "onload" ... Coba dengan ini:

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

Masukkan saja JS Anda window.onload

window.onload = function() {

        what();

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

    }
— RIYAJ KHAN
sumber
7

Bagian JavaScript perlu dijalankan setelah halaman dimuat, oleh karena itu disarankan untuk menempatkan skrip JavaScript di akhir tag 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>
Luaskan cuplikan

— pengguna5323957
sumber
2
Maukah Anda Berhenti Menggunakan Huruf Besar Setiap Kata yang Anda Ketik?
— VortexYT
6

Javascript terlihat bagus. Coba jalankan setelah div dimuat. Coba jalankan hanya jika dokumen sudah siap. $(document).readydi jquery.

— JT Nolan
sumber
1
juga atribut tipe dalam tag skrip sudah usang.
— JT Nolan
2
dan mengimpor jquery untuk menyelesaikan ini berlebihan kecuali Anda berencana menggunakannya untuk proyek ini di sini. window.onloadmungkin cukup tetapi ada acara lain yang tersedia juga. Lihat MDN di window: developer.mozilla.org/en-US/docs/Web/API/Window
— Sgnl
5 

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

— pengguna6175882
sumber
Jawaban Anda benar tetapi izinkan saya meminta Anda untuk menambahkan beberapa konteks di sekitar kode sumber Anda. Jawaban hanya kode sulit untuk dipahami. Ini akan membantu penanya dan pembaca di masa depan jika Anda dapat menambahkan lebih banyak informasi di posting Anda.
— NSP
3

Berikut Apakah potongan saya mencobanya. Saya harap ini akan membantu Anda. 

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

3

Anda dapat mencoba menggunakan metode setTimeout untuk memastikan html Anda dimuat terlebih dahulu.

— Eddy
sumber
3

Akar penyebabnya adalah: HTML pada halaman harus dimuat sebelum kode javascript . Menyelesaikan dengan 2 cara:

1) Izinkan pemuatan HTML sebelum kode 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) Pindahkan kode js di bawah kode HTML

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

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

— pengguna2114253
sumber
Masalahnya adalah pertama kali div html dimuat ..daripada fungsi skrip java yang memanggil sekarang berfungsi ...
— user2114253
1

Saya mengalami masalah yang sama dan ternyata kesalahan nol itu karena saya belum menyimpan html yang saya gunakan.

Jika elemen yang dirujuk belum disimpan setelah halaman dimuat adalah 'null', karena dokumen tidak memuatnya pada saat pemuatan. Menggunakan window.onload juga membantu proses debug.

Saya harap ini bermanfaat bagi Anda.

— plagueanomicPlague
sumber
1

Kesalahan ini dapat muncul bahkan jika Anda memuat skrip Anda setelah render html selesai. Dalam contoh ini, kode Anda

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

tidak memiliki nilai di dalam div. Jadi kesalahan dimunculkan, karena tidak ada nilai untuk diubah di dalamnya. Seharusnya begitu

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

kemudian.

— Marko Slijepčević
sumber
0

Tambahkan jquery ke < head>

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

Gunakan $ document.ready () : kode dapat berada di < head>atau dalam file terpisah seperti main.js

1) menggunakan js di file yang sama (tambahkan ini di < head>):

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

2) menggunakan beberapa file lain seperti main.js (tambahkan ini di < head>):

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

dan tambahkan kode di file main.js :)

— abe312
sumber
0

Anda perlu berubah divmenjadi p. Secara teknis innerHTML berarti berada di dalam <??? id=""></???>bagian.

Perubahan:

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

ke

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

Perbuatan:

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

akan berubah 

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

yang sebenarnya tidak masuk akal.

Anda juga dapat mencoba mengubah:

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

ke dalam ini 

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

untuk membuatnya berhasil.

— pengguna6175882
sumber
0

Kesalahannya menjelaskan sendiri itu tidak mendapatkan tag HTML di mana Anda ingin mengatur Data Jadi buat tag tersedia untuk JS maka hanya Anda yang dapat mengatur Data untuk itu.

— Shubham
sumber
0

Tidak diragukan lagi, sebagian besar jawaban di sini benar, tetapi Anda juga dapat melakukan ini:

document.addEventListener('DOMContentLoaded', function what() {
   document.getElementById('hello').innerHTML = 'hi';  
});
— Shrey Tripathi
sumber
0

Ada kemungkinan penyebab berbeda seperti yang dibahas hanya ingin menambahkan ini untuk seseorang yang mungkin memiliki masalah yang sama dengan saya.

Dalam kasus saya, saya memiliki div dekat yang hilang seperti yang ditunjukkan di bawah ini

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

Hilangnya div dapat menyebabkan disorganisasi transversal dari anak ke induk atau induk ke anak sehingga mengakibatkan kesalahan saat Anda mencoba mengakses elemen di DOM

— Proxybee
sumber
Harap jawab sesuai contoh OP.
— mishsx
@mishsx alasan balasan saya: Saya memiliki kesalahan yang sama persis dan ketika saya mencari, saya melihat perbaikan semua orang tetapi bukan perbaikan dalam kasus saya sendiri, menanyakan pertanyaan yang sama akan menduplikasi, saya merasa orang lain mungkin tepat situasi yang sama juga dan saya memutuskan untuk memposting kesalahan saya sendiri dan memperbaikinya sebagai repl ... seperti yang Anda lihat, itu dengan jelas dinyatakan pada balasan sehingga akan membantu mereka yang berada dalam situasi yang persis sama namun jelas bagi orang lain bahwa ini bukan bukan perbaikan atas kesalahan dalam pertanyaan. Jika ini tidak beres, mohon saran tentang bagaimana saya harus membuat kesalahan alternatif dan memperbaikinya diketahui tanpa menduplikasi
— Proxybee
0

Biarkan DOM dimuat. Untuk melakukan sesuatu di DOM Anda harus memuatnya terlebih dahulu. Dalam kasus Anda, Anda harus memuat <div>tag terlebih dahulu. maka Anda memiliki sesuatu untuk dimodifikasi. jika Anda memuat js terlebih dahulu maka fungsi itu mencari Anda HTMLuntuk melakukan apa yang Anda minta, tetapi saat itu Anda HTMLsedang memuat dan fungsi Anda tidak dapat menemukan HTML. Jadi Anda bisa meletakkan script di bagian bawah halaman. di dalam <body>tag maka fungsi tersebut dapat mengakses <div>Karena DOM sudah dimuat saat Anda menekan skrip.

— HeshanHH
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.