document.getElementById()는 $ (document) .ready 내부에서 호출 되었음에도 불구하고 null을 반환합니다.

Question

웹 페이지에서 스톱워치의 랩 기능을 연구 중입니다. 아이디어는 랩을 클릭 할 때마다 현재 시간이 추가 될 div가 있다는 것입니다. 그러나 lapLog div를 참조하려고하면 getElementById 함수에서 null이 반환됩니다. 그 페이지는 모든 요소가 검색 가능하도록 완전히로드되어야한다는 것을 알고 있습니다. 그래서 나는 $ (document) .ready 블록 안에있는 버튼에 의해 호출 된 함수를 배치했지만, 그럼에도 불구하고 여전히 null을 반환합니다.

관련 자바 스크립트 (timer.js) :

$(document).ready(function(){ 
 
    $('#lapClkBtn').click(function(){ 
 
     // Only allow laps to be recorded if the timer is running 
 
     if (ClkTimer.isAlive() == true) { 
 
      var newEntry = ClkTimer.recordLap(); 
 
      lapLog = document.getElementById('lapLog'); 
 
      lapLog.innerHTML.append(newEntry); 
 
      lapLog.animate({ 
 
       scrollTop: lapLog.prop('scrollHeight') 
 
      }, 100); 
 
     } 
 
    }); 
 
}) 
 
    
 
function clkTimer(text, updateinterval) { 
 
    this.recordLap = function() { 
 
     this.lapNum = this.lapNum + 1; 
 
     return String(this.lapNum) + "| " + this.formattedTime() + "<br>"; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="lapClkBtn">Lap</button> 
 
<div class="lapLog"></div>

Answer 1

귀하의 laplog는 클래스로 사용됩니다. getElementById은 클래스가 아닌 주어진 id로 요소를 찾습니다. id으로 바꿉니다.

consloe에서

<div id="lapLog"></div>