clearInterval() not recognizing ID on page unload

I created a javascript timer that prints to the console every time 10 seconds have elapsed and then added clearInterval(); on page unload. However, when I click the next button, I just get an error and the timer continues to print to the console after I've left the page.
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var sec = 0;

var myInterval = setInterval(displayTime, 10000)

function displayTime() {
sec = sec + 10;
console.log(sec, 'seconds have elapsed');
}


});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
clearInterval(myInterval);


});
And here's a picture of my error:
It seems as though the interval ID is not being recognized.