Question

未捕获的 TypeError：无法在 javascript 中设置 null 属性（设置‘onmouseover’）错误

2023-03-03

355

javascript events

我甚至不知道这是怎么发生的，为什么会发生，所以我真的不知道如何解决它。
我使用的是最新版本的 Google Chrome。没有 JS 框架。

我尝试使用以下代码在将鼠标悬停在一段文本上时产生有趣的效果：

const letters = "ABCDEFGHIJKLMNOPQRTUVWXYZabcdefghijklmnopqrtuvwxyz01234567890"

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() * 62)]
        })
        .join("");
            
        if(iteration >= event.target.dataset.value.length){ 
            clearInterval(interval);
        }
        
        iteration += 1 / 5;
    }, 25);
}

这里不起作用的代码是

document.getElementById("header").onmouseover = event => {  
}

我的 HTML 是这样的：

<!DOCTYPE html>
<html><head>
        <meta charset="UTF-8">
        
        <title>Kokice5</title>
        <link rel="stylesheet" href="styles.css">
        <script src="code.js"></script>

    </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> <-- Header I would like to affect !-->
</body></html>

错误： 未捕获的 TypeError：无法设置 null 的属性（设置“onmouseover”）

我预期发生的是这个。

Answer 1

将 <script src="code.js"></script> 移至结束 </body> 标签之前，以便它在运行时查找的元素存在。

Unmitigated

2023-03-03

Answer 2

您需要将脚本标签作为身体中的最后一项，例如：

978908921

这是因为您的javascript文件在 ＆lt; H1/＆gt; 元素是在DOM中创建的。当它尝试通过ID找到您的元素时，它找不到任何东西， getElementById 返回null。在标题中，但是要在执行JS时进行更改，您可以将某些布尔属性放入元素中，例如 defer 或 async 。例如，您可以保留 ＆lt; script＆gt; 它在哪里，但将其更改为

4744359613

，您的代码将工作如何工作。到。有关 defer 的更多信息，请参见 https://developer.mozilla.org/en-us/docs/web/html/element/script#attr-defer

另请参阅：我应该放在哪里html标记中的标签？