Boş değerin 'innerHTML' özelliği ayarlanamaz

Question 1

Neden bir hata veya Yakalanmayan TypeError alıyorum: 'innerHTML' null özelliği ayarlanamıyor? InteriorHTML'yi anladığımı ve daha önce işe yaradığını sanıyordum.

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

helloScript yüklendiğinde var olması için div'i kodun önüne yerleştirmelisiniz.

Question 3

Öncelikle neden ilk etapta meydana geldiğine dair temel nedeni anlamaya çalışalım.

Neden bir hata veya Yakalanmayan TypeError alıyorum: 'innerHTML' null özelliği ayarlanamıyor?

Tarayıcı her zaman HTML DOM'un tamamını yukarıdan aşağıya yükler. scriptEtiketlerin içine yazılan herhangi bir JavaScript kodu ( headHTML dosyanızın bölümünde bulunur), tüm DOM'nuz (gövde etiketinde bulunan çeşitli HTML öğesi etiketleri) yüklenmeden önce bile tarayıcı oluşturma motoru tarafından yürütülür. headEtikette bulunan komut dosyaları , kimliği olan bir öğeye, DOM'de hellogerçekten oluşturulmadan önce erişmeye çalışıyor . Açıkçası, JavaScript öğeyi göremedi ve bu nedenle boş referans hatasını görmeye başlıyorsunuz.

Nasıl eskisi gibi çalışmasını sağlayabilirsiniz?

Kullanıcı sayfanıza ilk kez gelir gelmez sayfada "merhaba" mesajını göstermek istiyorsunuz. Bu nedenle, DOM'un tam olarak yüklendiğinden ve helloid öğesinin erişilebilir / kullanılabilir olduğundan tamamen emin olduğunuz bir noktada kodunuzu bağlamanız gerekir . İki şekilde elde edilebilir:

Komut dosyalarınızı yeniden sıralayın : Bu şekilde, komut dosyalarınız yalnızca hellokimlik öğenizi içeren DOM zaten yüklendikten sonra tetiklenir . Bunu, komut dosyası etiketini tüm DOM öğelerinden sonra, yani bodyetiketin bittiği yerin altına taşıyarak elde edebilirsiniz . Oluşturma yukarıdan aşağıya doğru gerçekleştiğinden, komut dosyalarınız sonunda yürütülür ve hata ile karşılaşmazsınız.

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

Snippet'i genişlet

Olay çengellemeyi kullanın : Tarayıcının oluşturma motoru, window.onloadtarayıcının DOM'u yüklemeyi bitirdiğine dair ipucu veren olay tabanlı bir olayı sağlar . Bu nedenle, bu olay tetiklendiğinde, hellokimliğine sahip öğenizin DOM'a zaten yüklenmiş olduğundan ve daha sonra bu öğeye erişmeye çalışan herhangi bir JavaScript'in başarısız olmayacağından emin olabilirsiniz. Yani aşağıdaki kod parçacığı gibi bir şey yaparsınız. Lütfen bu durumda, kodunuzun HTML belgenizin üst kısmındahead etiketin içinde mevcut olmasına rağmen çalıştığını unutmayın .

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

Snippet'i genişlet

Question 4

Javascript'e "onload" işlemini gerçekleştirmesini söyleyebilirsiniz ... Şunu deneyin:

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

Question 5

Sadece JS'nizi koyun window.onload

window.onload = function() {

        what();

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

    }

Question 6

JavaScript bölümünün sayfa yüklendikten sonra çalışması gerekir, bu nedenle JavaScript komut dosyasının gövde etiketinin sonuna yerleştirilmesi önerilir.

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

Snippet'i genişlet

Question 7

Javascript iyi görünüyor. Div yüklendikten sonra çalıştırmayı deneyin. Yalnızca belge hazır olduğunda çalıştırmayı deneyin. $(document).readyjquery'de.

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>

Snippet'i genişlet

Question 9

İşte benim pasajım deneyin. Umarım size yardımcı olur.

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

Snippet'i genişlet

Question 10

Önce html'nizin yüklendiğinden emin olmak için setTimeout yöntemini kullanmayı deneyebilirsiniz.

Question 11

Temel neden şudur: Bir sayfadaki HTML, javascript kodundan önce yüklenmelidir . 2 şekilde çözümlemek:

1) js kodundan önce HTML yüklemesine izin verin.

<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 kodunu HTML kodunun altına taşıyın

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

Snippet'i genişlet

Question 13

Aynı sorunu yaşadım ve boş hatanın çalıştığım html'yi kaydetmemiş olmamdan kaynaklandığı ortaya çıktı.

Belirtilen öğe, sayfa yüklendikten sonra kaydedilmemişse, belge yükleme sırasında içermediğinden 'boş' olur. Window.onload kullanmak ayrıca hata ayıklamaya da yardımcı olur.

Umarım bu sizin için yararlı olmuştur.

Question 14

Bu hata, betiğinizi html oluşturma bittikten sonra yükleseniz bile görünebilir. Verilen bu örnekte kodunuz

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

div içinde hiçbir değeri yoktur. Böylece hata yükselir, çünkü içinde değiştirilecek bir değer yoktur. Olmalıydı

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

sonra.

Question 15

İçine jquery ekleyin < head>

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

$ Document.ready () kullanın : kod, < head>main.js gibi ayrı bir dosyanın içinde veya içinde olabilir

1) js'yi aynı dosyada kullanma (bunu içine ekleyin < head>):

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

2) main.js gibi başka bir dosya kullanarak (bunu şuraya ekleyin < head>):

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

ve kodu main.js dosyasına ekleyin :)

Question 16

Sen değiştirmeniz gerekir diviçine p. Teknik olarak internalHTML,<??? id=""></???> parçanın .

Değişiklik:

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

içine

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

Yapıyor:

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

dönecek

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

bu aslında mantıklı değil.

Ayrıca değiştirmeyi deneyebilirsiniz:

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

bunun içine

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

çalışmasını sağlamak için.

Question 17

Hata kendi kendini açıklıyor, Data'yı ayarlamak istediğiniz HTML etiketini almıyor Bu yüzden etiketini JS'de kullanılabilir hale getirin, sonra yalnızca Verileri buna ayarlayabilirsiniz.

Question 18

Şüphesiz, buradaki cevapların çoğu doğrudur, ancak bunu da yapabilirsiniz:

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

Question 19

Benimle aynı sorunu yaşayan biri için bunu eklemek isteyeceğimiz gibi farklı olası nedenler var.

Benim durumumda, aşağıda gösterildiği gibi eksik bir yakın div var

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

Yakın bir div eksiklik çocuktan ebeveyne veya ebeveynden çocuğa çapraz geçişte düzensizliğe neden olabilir, dolayısıyla DOM'daki bir öğeye erişmeye çalıştığınızda bir hatayla sonuçlanabilir.

Question 20

DOM'un yüklenmesine izin verin. DOM'da bir şey yapmak için önce onu yüklemelisiniz. Sizin durumunuzda, <div>önce etiketi yüklemelisiniz . o zaman değiştirecek bir şeyin var. Eğer önce js'yi yüklerseniz, o zaman bu işlev HTMLsizden istediğinizi yapmak için bakıyor , ancak o zaman HTMLyüklüyken işleviniz HTML. Böylece komut dosyasını sayfanın altına koyabilirsiniz. <body>etiketinin içindeyse işlev <div>çünkü DOM, komut dosyasına bastığınızda zaten yüklenmiştir.