为什么我的文本区域返回值 'null'？

Question

我一直在将文本区域定义为 t 时出错，但 t 的值为空，我不知道为什么。我正在搜索的 ID 是正确的，但没有返回任何内容。我试图让我的文本区域在用户按下选项卡按钮时跳转 5 个空格，而不是将焦点更改为另一个元素的默认操作。

let t = document.getElementById('txtEditor');

function addTextAreaListener() {
  t.addEventListener("keydown", taKeyPress);
}

function taKeyPress(e) {
  e.preventDefault();
  if (e.keyCode == "9") {
    t.value += "     ";
  }
}
addTextAreaListener();

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="mystyles.css">
  <script type="text/javascript" src="index.js"></script>


  <meta charset="utf-8">
  <title>Outline editor</title>
  <h1>Outline Editor</h1>
</head>

<body>
  <main class="buttons">
    <button type="button" name="btnSave">Save</button>
    <button type="button" name="btnTF">Text formatting</button>
    <button type="button" name="btnLoad">Load</button>

  </main>
  <main>
    <textarea id="txtEditor" rows="30" cols="80"></textarea>
  </main>
</body>

</html>

Answer 1

当这个脚本被执行时，你的 id='txtEditor' 的元素还没有被创建。您最好使用 'onload' 事件：

window.onload= function (){document.getElementById("txtEditor")...

或将脚本放入页面底部（正文下方）。

为什么我的文本区域返回值 'null'？

Why is my text area returning the value 'null'?

html

javascript

dom

textarea