uncaught TypeError: Kann die Eigenschaft 'style' von null im Frame

Question

nicht lesen. Ich mache einen Ladebalken.

Und jetzt habe ich einen Fehler, wenn ich den Download klicken

Uncaught TypeError: Cannot read property 'style' of null

Ich weiß nicht, was ich bin falsch dong bitte jemand kann mir helfen hier ist mein Code

<a class="tooltip-test" id="header"><div class="progress" id="headerTop" style="cursor:default"> 
       <div id="myElement" class="progress-bar bg-info progress-bar-striped progress-bar-animated myBar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
        <p class="text-center">0%</p> 
       </div> 
      </div></a> 
      <button onclick="move()" type="button" class="btn btn-outline-primary btn-lg">download</button> 
     </div> 
     <script type="text/javascript"> 
      function move() { 
       document.getElementById("headerTop").style.cursor = "wait"; 
       var elem = document.getElementById("myBar"); 
       var width = 0; 
       var id = setInterval(frame, 1000); 
       function frame() { 
        if (width >= 99) { 
         var number = random(99, 100) 
         if(number = 99) { 
          clearInterval(id); 
          document.getElementById("MyElement").className = 
          document.getElementById("MyElement").className.replace 
          (/(?:^|\s)bg-info(?!\S)/g , 'bg-danger') 
          document.getElementById("header").title = "Oops looks like something has gone wrong reload the page to start over"; 
         }else if (number = 100) { 
          clearInterval(id); 
          document.getElementById("MyElement").className = 
          document.getElementById("MyElement").className.replace 
          (/(?:^|\s)bg-info(?!\S)/g , 'bg-success') 
          document.getElementById("header").title = "download is ready"; 
         } 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         elem.innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
    </script> 

FYI ich verwende Bootstrap für das Styling

Answer 1

Nach Jonathans Korrektur könnte ein weiteres Problem, dass Elem, Breite und id in der übergeordneten move() Funktion definiert ist, und nicht in der untergeordneten Frame() Funktion.

<script type="text/javascript"> 
      function move() { 
       document.getElementById("headerTop").style.cursor = "wait"; 
       function frame() { 
        var elem = document.getElementById("myElement"); 
        var width = 0; 
        var id = setInterval(frame, 1000); 
        if (width >= 99) { 
         var number = random(99, 100) 
         if(number = 99) { 
          clearInterval(id); 
          document.getElementById("myElement").className = 
          document.getElementById("myElement").className.replace 
          (/(?:^|\s)bg-info(?!\S)/g , 'bg-danger') 
          document.getElementById("header").title = "Oops looks like something has gone wrong reload the page to start over"; 
         }else if (number = 100) { 
          clearInterval(id); 
          document.getElementById("myElement").className = 
          document.getElementById("myElement").className.replace 
          (/(?:^|\s)bg-info(?!\S)/g , 'bg-success') 
          document.getElementById("header").title = "download is ready"; 
         } 
        } else { 
         width++; 
         elem.style.width = width + '%'; 
         elem.innerHTML = width * 1 + '%'; 
        } 
       } 
      } 
    </script> 

Answer 2

ich denke, das Problem mit dieser Linie ist:

var elem = document.getElementById("myBar"); 

Sie die Auswahl von Id aber mybar ist eine Klasse

So sollten Sie wählen von classname

Sie könnten auch von id wählen Sie einfach, wie Sie unten tun:

var elem document.getElementById("MyElement"); 

Das ist wahrscheinlich der einfachste Sache zu tun.

Answer 3

Beobachtung: Es gibt keine id mit Namen myBar in Ihrem DOM zur Verfügung steht.

Anweisung:var elem = document.getElementById("myBar") wird null zurückgeben.

Daher erhalten Sie unter Fehler, wie Sie versuchen, auf style Eigenschaft von null zuzugreifen.

Uncaught TypeError: Cannot read property 'style' of null