Question

对象可能为“null”Typescript [关闭]

2022-09-18

285

javascript typescript next.js

我似乎遇到了一个问题，它告诉我对象可能为空。我在网上和 StackOverflow 上查找过，尝试了十几种修复方法，但都没有成功。我试图使用它们的 id 将文本“test”插入到 html 元素中。

  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";
  }

我收到此错误：“TypeError：无法设置 null 的属性（设置‘innerHTML’）”

任何帮助都值得赞赏，谢谢！😃

Answer 1

这可能是因为代码在 dom 加载之前执行，因此为 null

首先检查脚本的加载位置。

<!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>

如果脚本放在 head 标签中，那么很有可能在 dom 加载之前执行。

您可以添加 onLoad 脚本来检测 dom 是否已加载，然后执行您的脚本。

您可以参考此处查看实现

这样的方法应该适合您。

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';
  }
};

Answer 2

您可以使用 as HTMLElement 告诉 typescript 该元素不会为空：

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";
}

您还可以使用感叹号 ! 。它是非空断言运算符。它从类型中删除 null 和 undefined。如下所示：

  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";
  }

游乐场

Answer 3

这是我最终修复此错误的方法：

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;

感谢所有回应我的求助请求的人：)