uncaught TypeError : 프레임에서 null의 속성 'style'을 읽을 수 없습니다.

Question

로딩 바 만들기. 내가 그나마

Uncaught TypeError: Cannot read property 'style' of null

내가 동 잘못 누군가가 나를 여기에 도움이 될 수 있습니다하시기 바랍니다 내 코드

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

은 참고로 내가 사용하고 있습니다 누구인지 알고 다운로드를 클릭하면

그리고 지금 내가 오류가있어 스타일을위한 부트 스트랩

Answer 1

조나단의 보정 후, 또 다른 문제는 ELEM, 폭 및 ID이 부모 이동() 함수에서 정의, 그리고 아이 프레임() 함수 것을 수 있습니다.

<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

나는이 줄로 문제가 있다고 생각한다 :

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

var elem document.getElementById("MyElement"); 

아마도 있다는 :

당신은 ID로 선택하고 있지만 myBar은 아래처럼 당신은 또한 단지 ID로 선택할 수 클래스 명

으로 선택해야하는 클래스 그래서

입니다 가장 쉬운 일.

Answer 3

관찰 : 이름 myBar 아무 id이 DOM에 사용할 수 없습니다 있습니다.

성명 :var elem = document.getElementById("myBar")은 null을 반환합니다.

따라서 속성에 액세스하려고하면 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'style' of null