How to change innerHTML or textContent ?

Question

Lately I was trying to build a web calaculator , In order to show the numbers and symbols pressed on the monitor I used both innerHTML and textContent but it keeps saying that these properties can't be assigned to null.
here is my code for more clearence.

https://code.sololearn.com/WKHH7L9NApu8/?ref=app

Answer 1

You need to wrap the JS in a window.onload so that it can access the DOM after it has been created. SL injects the JS tab in the head of the HTML page prior to the creation of the DOM which means the element objects you're trying to access don't yet exist when you're attempting to manipulate them. This is why you're getting the null error.
You then need to change the innerHTML or textContent directly or set a variable to the object and then use the object to access the innerHTML or textContent of the object.

window.onload = ()=>{
function calculator(){
let x = document.getElementById("monitor");
x.textContent = "Hello";
//document.getElementById("monitor").innerHTML = "Hi";
};

calculator();
};

Answer 2

ChaoticDawg thanks man! really helped me 💛