I'm trying to write the output I got to a paragraph defined as <p id="output-text"></p> in my html file. However I keep getting an error that says Uncaught:TypeError:Cannot set properties of null(setting:innerText). What can I do to fix this? I tried checking if there is a difference in the id is used in my HTML file and the 'id' I used to reference it in the .js file . I don't find any difference in that aspect.

const dob=document.querySelector("#dob");
const luckyNumber=document.querySelector("#lucky-num");
const checkButton=document.querySelector("#check");
checkButton.addEventListener("click",clickHandler);
const result=document.querySelector("#output-text");

function clickHandler()
{
    var sumOfDigits=sum(dob);
    testLuck(sumOfDigits,luckyNumber);
}

function sum(dob)
{
    dob=dob.value.replaceAll("-","");
    console.log(dob);
    dob=parseInt(dob);
    var sum=0;
    while(dob > 0)
    {
        var digit=dob%10;
        sum+=digit;
        dob=Math.trunc(dob/10);
    }
    return sum;
}

function testLuck(sumOfDigits,luckyNumber)
{
    if(sumOfDigits%luckyNumber.value === 0)
    {
        result.innerText="Yayy🥳Your Birthday is Lucky";
    }
    else
    {
        result.innerText="Uff your Birthday is not sooo lucky it seems😭";
    }
}