在页面上执行某些操作后，我尝试将javascript变量添加到html内容。
在我的app.js中，我具有这种结构
import {utils} from "./utils.js";
function main(){
//do some other stuff
function1(function2);
}
在我的utils.js中
export class utils{
function1(nextFunction) {
//do some stuff
nextFunction()
}
function2(){
var data=2
document.getElementById("data").innerHTML = data;
}
我在index.html中使用ID数据创建了一个div
我在正文声明后以html格式运行我的app.js，以确保DOM已充满电：
<html>
<head>
<!-- stuff -->
</head>
<body>
<!-- stuff -->
<div id="data"><ul></ul></div>
</body>
<script src="js/app.js" type="module" crossorigin="anonymous"></script>
</html>
我的问题是，当我从function1调用function2时，出现TypeError：无法将属性'innerHTML'设置为null
但是当我直接从app.js中的main（）调用function2（）时，它运行完美
import {utils} from "./utils.js";
function main(){
//do some other stuff
function2();
}
我该如何解决？