document.getElementById（）は$（document）内で呼び出されているにもかかわらずヌルを返します.ready

Question

私はWebページのストップウォッチのラップ機能に取り組んでいます。このアイデアは、ラップを記録するためにクリックするたびに現在の時刻が追加されるdivがあることです。しかし、私はlapLog divを参照しようとすると、getElementById関数からnullが戻ってきます。私はページがすべての要素を発見可能にするために完全にロードされなければならないことを知っています。なぜなら、ボタンによって呼び出される関数を$（document）.readyブロックの中に入れたのですが、

関連のJavaScript（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>