I am trying to add a javascript variable to html content after some actions on the page.
In my app.js i have this structure
import {utils} from "./utils.js";
function main(){
//do some other stuff
function1(function2);
}
In my utils.js
export class utils{
function1(nextFunction) {
//do some stuff
nextFunction()
}
function2(){
var data=2
document.getElementById("data").innerHTML = data;
}
I have created a div in my index.html with the id data
I run my app.js in html after the body declaration to make sure the DOM is fully charged:
<html>
<head>
<!-- stuff -->
</head>
<body>
<!-- stuff -->
<div id="data"><ul></ul></div>
</body>
<script src="js/app.js" type="module" crossorigin="anonymous"></script>
</html>
My problem is that when I call function2 from function1 I get a TypeError: Cannot set property 'innerHTML' of null
but when I call function2() directly from main() in app.js it works perfectly
import {utils} from "./utils.js";
function main(){
//do some other stuff
function2();
}
How can I fix this?