Uncaught ReferenceError: html未定义——验证码登录页JS报错排查

错误根源在于setCaptcha函数中，你生成了验证码的HTML字符串，但没有将结果赋值给html变量就直接使用了它。

原代码里的这一段：

captchaValue.split("").map((char)=> {
    // ...生成span的逻辑
}).join("");
document.querySelector(".login-form .captcha .preview").innerHTML = html;

这里map+join的结果没有保存到任何变量，html是未定义的，所以抛出引用错误。

修正方案一：将生成的HTML字符串赋值给html变量 #

function setCaptcha() {
    const 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;
}

修正方案二：直接将结果赋值给innerHTML，省略html变量 #

function setCaptcha() {
    document.querySelector(".login-form .captcha .preview").innerHTML = 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("");
}

两种方案都能解决这个错误，任选其一即可。

内容的提问来源于stack exchange，提问作者aldo ls