Object 可能是“空” Typescript

Question

我似乎遇到了一個問題，它告訴我該對象可能是 null。 我在網上和 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

您可以告訴 typescript 元素不會是 null 與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";
}

也可以使用感嘆號! . 它是非空斷言運算符。 它從類型中刪除 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;

感謝所有回應我的請求的人：）

Object 可能是“空” Typescript

問題描述

3 個解決方案

解決方案1
1 2022-09-18 11:49:47

解決方案2
0 已采納 2022-09-18 11:24:11

解決方案3
0 2022-09-24 08:17:36

Object 可能是“空” Typescript

問題描述

3 個解決方案

解決方案1 1 2022-09-18 11:49:47

解決方案2 0 已采納 2022-09-18 11:24:11

解決方案3 0 2022-09-24 08:17:36

解決方案1
1 2022-09-18 11:49:47

解決方案2
0 已采納 2022-09-18 11:24:11

解決方案3
0 2022-09-24 08:17:36