1

I am working on the lap feature for a stopwatch on a web page. The idea is that there is a div to which the current time will be appended whenever you click to record a lap. However, I'm getting null back from the getElementById function when I try to reference the lapLog div. I know that the page must be fully loaded for all elements to be discoverable, which is why I placed the function called by the button inside a $(document).ready block, but in spite of this it's still returning null.

Relevant 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>
K. Haskins
  • 55
  • 1
  • 5
  • in the consloe you can see `ReferenceError: Can't find variable: ClkTimer` your function is `clkTimer` – DaFois Dec 08 '17 at 17:17

1 Answers1

4

Your laplog is used as class. getElementById finds the element by the given id, not class. Replace it with id.

<div id="lapLog"></div>
Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112