JS timer not visible on survey page

Qualtrics.SurveyEngine.addOnload(function(){

var timer = document.createElement("div"); 
timer.className = "timer";
timer.id = "timer_1";
timer.innerHTML = "time: 00:00";

// timepassed is the measure of how long a respondent stays on the given page
var timepassed = 0;
var myTimer;

function startTimer() {
myTimer = setInterval(increaseSeconds, 1000);
}
function increaseSeconds() {
timepassed++; 
document.getElementById("timer_1").innerHTML="time: " + formatTime(timepassed);
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if(seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
}
display = document.querySelector('#time');
startTimer(); 

$('NextButton').onclick = function (event) {
//stop timer
clearInterval(myTimer); 
//timepassed variable at this point should contain how long the respondent has spent on this page.
};
});
        Qualtrics.SurveyEngine.addOnReady(function(){});

        Qualtrics.SurveyEngine.addOnUnload(function()
        {
        var var1 = this.getChoiceValue(1)
        Qualtrics.SurveyEngine.setEmbeddedData('fruit1',  var1);
        var var2 = this.getChoiceValue(3)
        Qualtrics.SurveyEngine.setEmbeddedData('fruit2', var2);
var timeSpentOnPage = this.timepassed;
        });
I'm trying to create a timer that measures how long a respondent stays on a given survey page, and also make the timer visible on the page as well. I couldn't find the HTML editor for each question/page, but with a bit of digging around the internet and this forum, (I think) I found a way to use HTML from js. Unfortunately, when I actually preview the survey, I don't see my timer anywhere (and hence can't tell if my timer actually works at all, either). Could someone help me find what the problem might be?