JavaScript: Need help ordering my JS "Uncaught TypeError: Cannot read property 'value' of null"

Question

我是一个业余 JS 人，所以请善待你的投票，因为我是新手。

我收到未捕获的类型错误：

Cannot read property 'value' of null.

我意识到问题出在我的 js 的顺序和它调用的顺序 DOM，但我不确定确切的位置。

有人介意帮我指明正确的方向吗？

这是我的代码：

<title></title>
</head>
<body>
  <form>
    <input id="todoItem" type="text" placeholder="Todo Item" />
    <input type="button" value="Save" onclick="insert();" />
  </form>
  <div id="display"></div>
<script type="text/javascript" src="main-2.js"></script>
</body>
</html>

主要-2.js:

var todos  = [];

var todoInput  = document.getElementById("todoItem");

var messageBox  = document.getElementById("display");

function insert() {
 todos.push(todoInput.value);

 clearAndShow();
}

function clearAndShow() {

  todoInput.value = "";

  messageBox.innerHTML = "";

  messageBox.innerHTML += "Titles: " + todos.join(", ") + "<br/>";
}

Answer 1

输入这一行：

var todoInput  = document.getElementById("todoItem");

进入函数insert

当 var todoInput 初始化时，元素不存在。

function insert() {
  var todoInput  = document.getElementById("todoItem");
  todos.push(todoInput.value);

  clearAndShow();
}

清除输入写这段代码

document.getElementById("todoItem").value='';

Answer 2

如果您即时创建变量，您永远不会知道您的文档已加载。更好的方法是使用 jquery document.ready 如果你在那里使用 jquery

$(document).ready(function(){
//javascript code goes here
)};

或者通过这些修改尝试您的代码

    <title></title>
    </head>
    <body>
      <form>
        <input id="todoItem" type="text" placeholder="Todo Item" />
        <input type="button" value="Save" onclick="insert();" />
      </form>
      <div id="display"></div>
    </body>

    <script>

    var todos  = [];





    function insert() {
var todoInput  = document.getElementById("todoItem");
     todos.push(todoInput.value);

     clearAndShow();
    }

    function clearAndShow() {
    var messageBox  = document.getElementById("display");
      todoInput.value = "";

      messageBox.innerHTML = "";

      messageBox.innerHTML += "Titles: " + todos.join(", ") + "<br/>";
    }
</script>

Answer 3

最好的时间投资是阅读并理解 错误消息。

Javascript 中的典型或常见错误消息如下：

Uncaught TypeError: undefined is not a function

查看第一部分：Uncaught TypeError。 Uncaught 表示错误未在 catch 语句中捕获，而 TypeError 是错误的名称。

正在看第二部分，比第一部分更有用。从字面上看，它清楚地说，它试图将 undefined 用作函数。

示例：

var x = undefined; // 'undefined' is a type in JS
x(); // This is what JS tried to do and said 'Hey! x is undefined. I can't execute it like a function.'

在您的情况下，错误的第二部分为：Cannot read property 'value' of null.

从字面上想象一下。 property.

的一些上下文

var person = {
  'name': 'Joe',
  'age': 10
};

现在，person 是 object，name 和 age 是 person 对象的 properties。

现在如果你执行 person.name JS 可以执行它因为人有一个属性叫做 name.

但是，如果你执行 monster.name，JS 会尝试查找 monster 对象。但是我们的代码中任何地方都没有 monster 对象。所以现在 JS 将 throw:

Uncaught ReferenceError: monster is not defined.

尝试分析两部分：Uncaught ReferenceError。 JS 试图搜索或引用未找到的对象。因此是ReferenceError.

在您的情况下，当您尝试获取 todoItem 时 DOM 尚未准备好，因此 JS 无法找到它。所以它应该是一个ReferenceErrror。
但是 document.getElementById() 这是 DOM ES 的一个实现，它搜索和修改标记中的 html 节点，当它找不到时 return 一个 null 对象东西。

null是JS中的一个对象。就像 person 是我们之前声明的对象。

现在您的变量 todoInput 将从 document.getElementById() 接收 null 对象并尝试在 null 对象中搜索 value 属性。它会在你的错误的第二部分立即说 "Hey! I cant read property value from the null object"

JavaScript: Need help ordering my JS "Uncaught TypeError: Cannot read property 'value' of null"

JavaScript: Need help ordering my JS "Uncaught TypeError: Cannot read property 'value' of null"

javascript

html

dom

typeerror