JavaScript实现鼠标悬停文字特效时遇Uncaught TypeError报错求助

报错原因 #

你的JS脚本放在<head>标签内，浏览器加载页面时会优先执行<head>里的脚本，此时<body>中的<h1 id="header">元素还未被解析渲染，document.getElementById("header")返回null，自然无法给null设置onmouseover属性，导致报错。

解决方法 #

方法1：将脚本移到<body>末尾 #

把<script src="code.js"></script>放在</body>标签之前，确保脚本执行时目标DOM元素已经存在：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Kokice5</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body onload="startTime()">
    <p id="clock" style="text-align: center;" class="notranslate"></p>
    <h1 id="header" style="text-align: center; font-size: 15vw;" data-value="Kokice5">Kokice5</h1>
    <script src="code.js"></script> <!-- 移到此处 -->
</body>
</html>

方法2：用DOMContentLoaded事件包裹代码 #

在JS代码外层添加DOM加载完成的监听事件，确保DOM元素就绪后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" // 补上缺失的字母S

    let interval = null;
    let ampm = 0;

    document.getElementById("header").onmouseover = event => {  
        let iteration = 0;
        
        clearInterval(interval);
        
        interval = setInterval(() => {
            event.target.innerText = event.target.innerText
            .split("")
            .map((letter, index) => {
                if(index < iteration) {
                    return event.target.dataset.value[index];
                }
                
                return letters[Math.floor(Math.random() * letters.length)] // 用letters.length替代硬编码62，避免字符数变化时出错
            })
            .join("");
                
            if(iteration >= event.target.dataset.value.length){ 
                clearInterval(interval);
            }
            
            iteration += 1 / 5;
        }, 25);
    }
});

方法3：给脚本添加defer属性 #

在<script>标签上添加defer属性，浏览器会在DOM解析完成后执行脚本，同时保持脚本在<head>中的位置：

<script src="code.js" defer></script>

额外优化提示 #

你的letters字符串中缺失了字母S（原字符串是ABCDEFGHIJKLMNOPQRTUVWXYZ），补上后随机字符池更完整；另外将Math.floor(Math.random() * 62)改为Math.floor(Math.random() * letters.length)，避免后续修改字符池时需要手动调整数字，提升代码健壮性。

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