Uncaught ReferenceError: html is not defined

I am just trying to make a login page that using captcha using javascript language here. But it throw an error when I tried to produce it.

It was saying that html is not defined, I already tried to check the code, but still could not figure it out what went wrong here.

here is the Javascript code that I think the problem spot is:

(function () {
    const fonts =['cursive', 'sans-serif', 'serif', 'monospace'];
    let captchaValue    = "";
    function generateCaptcha(){
        let value = btoa(Math.random()*100000000);
        value = value.substr(0,5+Math.random()*5);
        captchaValue= value;
    }

    function setCaptcha() {
        captchaValue.split("").map((char)=> {
            const rotate = -20 + Math.trunc(Math.random()*30);
            const font = Math.trunc(Math.random()*fonts.length);
            return `<span
                style="
                transform:rotate(${rotate}deg);
                font-family: ${fonts[font]};
            "                
            >
                ${char}
            </span>`;
        }).join("");
        document.querySelector(".login-form .captcha .preview").innerHTML = html;
    }
    function initCaptcha(){
        document.querySelector(".login-form .captcha .captcha-refresh").addEventListener('click', function(){
            generateCaptcha();
            setCaptcha();
        });
        generateCaptcha();
        setCaptcha();
    }
    initCaptcha();
})();

Your problem seems to be in this line of code:

document.querySelector(".login-form .captcha .preview").innerHTML = html;

you are setting the innerHTML of the ".preview" element to html which you didn't define anywhere in your code.

I'm not sure of what you want to set it to, but this is merely a guess, you can change the setCaptcha to the following:

function setCaptcha() {
    let html = captchaValue.split("").map((char)=> {
        const rotate = -20 + Math.trunc(Math.random()*30);
        const font = Math.trunc(Math.random()*fonts.length);
        return `<span
            style="
            transform:rotate(${rotate}deg);
            font-family: ${fonts[font]};
        "                
        >
            ${char}
        </span>`;
    }).join("");
    document.querySelector(".login-form .captcha .preview").innerHTML = html;
}