如何修复:"Unable to get property 'value' of undefined or null reference"

How to fix: "Unable to get property 'value' of undefined or null reference"

我正在制作一个简单的 encoder/decoder 让我和我的朋友用代码相互交谈,或者至少它应该很简单。当我尝试引用我的任何元素时,我总是收到错误 "Unable to get property 'value' of undefined or null reference"。我觉得我正在做一些非常愚蠢但很容易修复的事情,但我看不到它。

我已经查看了几个相关问题,并尝试了一堆建议的内容,但似乎没有任何效果。顺便说一下,如果有影响的话,我正在使用 Microsoft Edge。

var inMsg = document.getElementById("input")
var outMsg = document.getElementById("output")

document.addEventListener('keypress', (event) => {
  if (event.key == 'Enter') {
    try {
      event.preventDefault()
    } catch (e) {
      console.log(e)
    }
    try {
      console.log(inMsg.value)

    } catch (e) {
      console.log(e)
    }
  }
})
<html>

<head>
  <script src="./main.js" type="text/javascript"></script>
  <style>

  </style>
</head>

<body>
  <div>
    <h2>Paste Coded Message Here -></h2>
    <textarea id="input" value=""></textarea>

    <textarea id="output"></textarea>
  </div>
</body>

</html>

通常我可以只记录值没问题,但它说当我 console.log 它时该元素为空。

尝试将 defer 添加到您的脚本标签中,如下所示:

<script src="./main.js" type="text/javascript" defer></script>

我相信 html 解析器在执行脚本时尚未到达您的 inMsg 元素,因此该元素的值为 undefined.

如果可行,请告诉我!

将前两行移动到添加事件侦听器函数中。此函数可能会在 dom 准备就绪且 isMag 变量填充为 null 之前调用。