Object is possibly 'null' Typescript
Question
I seem to have encountered an issue where it tells me that the object's are possibly null. I have looked online and on StackOverflow and tries a dozen fixes to no success. I am trying to insert the text "test" into the html elements using their id's.
var cname = document.getElementById("chargername");
var cloc = document.getElementById("chargerlocation");
var ctype = document.getElementById("chargertype");
var cdesc = document.getElementById("chargerdescription");
var crating = document.getElementById("chargerrating");
function handleClick() {
cname.innerHTML = "test";
cloc.innerHTML = "test";
ctype.innerHTML = "test";
cdesc.innerHTML = "test";
crating.innerHTML = "test";
}
I get this error: "TypeError: Cannot set properties of null (setting 'innerHTML')"
Any help is appreciated, Thanks!
3 answers
solution1
1 2022-09-18 11:49:47
This might be due to the fact that the code is executed before the dom is loaded and hence be null
First check where the script is loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script> <!-- If the script is placed here then there is a high chance it is executed before dom is loaded -->
<title>Document</title>
</head>
<body>
</body>
</html>
If the script is placed in the head tag then there is a high chance it is executed before dom is loaded.
You can add the onLoad script to detect that the dom is loaded and then execute your script.
You can refer here to get see the implementation
Something like this should work for you.
window.onload = function () {
function elmById(idName: string): HTMLElement {
return document.getElementById(idName) as HTMLElement;
}
const cloc = elmById('chargerlocation');
const ctype = elmById('chargertype');
const cdesc = elmById('chargerdescription');
const crating = elmById('chargerrating');
function handleClick() {
cloc.innerHTML = 'test';
ctype.innerHTML = 'test';
cdesc.innerHTML = 'test';
crating.innerHTML = 'test';
}
};
solution2
0 ACCPTED 2022-09-18 11:24:11
You can tell typescript that the element wont be null with as HTMLElement :
let cloc = document.getElementById("chargerlocation") as HTMLElement;
let ctype = document.getElementById("chargertype") as HTMLElement;
let cdesc = document.getElementById("chargerdescription") as HTMLElement;
let crating = document.getElementById("chargerrating") as HTMLElement;
function handleClick() {
cloc.innerHTML = "test";
ctype.innerHTML = "test";
cdesc.innerHTML = "test";
crating.innerHTML = "test";
}
You can also use the exclamation mark ! . It is the non-null assertion operator. It removes null and undefined from the type. Like so:
let cloc = document.getElementById("chargerlocation");
let ctype = document.getElementById("chargertype");
let cdesc = document.getElementById("chargerdescription");
let crating = document.getElementById("chargerrating");
function handleClick() {
cloc!.innerHTML = "test";
ctype!.innerHTML = "test";
cdesc!.innerHTML = "test";
crating!.innerHTML = "test";
}
solution3
0 2022-09-24 08:17:36
This is what I did finally to fix this error:
var cname = docSelect.name;
var cloc = docSelect.location;
var ctype = docSelect.types;
var cdesc = docSelect.description.substring(0, 90) + "...";
var clink = `/chargers/${props}`;
document.getElementsByClassName("chargername")[0].innerHTML = cname;
document.getElementsByClassName("chargerlocation")[0].innerHTML = cloc;
document.getElementsByClassName("chargertype")[0].innerHTML = ctype;
document.getElementsByClassName("chargerdescription")[0].innerHTML = cdesc;
Thanks to everyone who responded to my plea for help:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.