Question

在这段代码中，我试图将DOM元素分配给变量，但是变量获得的值为null。为什么会这样呢？我犯了一些错误吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Tasks</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A simple task list for your day-to-day.">
        <meta name="author" content="Bruno M. B. Sdoukos">
        <meta name="keywords" content="task list, checklist">
        <script>
            var taskCreator = document.querySelector('#taskcreator');
            var list = document.querySelector('ul');
            var taskInput = document.querySelector('#taskinput');
        </script>
    </head>
    <body>
        <ul></ul>
        <input type="text" id="taskinput">
        <button id="taskcreator">Create new item</button>
    </body>
</html>

Answer 1

当浏览器执行Javascrit时，尚无输入和按钮。您可以使用

对其进行修复

<!DOCTYPE html>
<html>
<head>
    <title>Tasks</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple task list for your day-to-day.">
    <meta name="author" content="Bruno M. B. Sdoukos">
    <meta name="keywords" content="task list, checklist">
</head>
<body>
<ul></ul>
<input type="text" id="taskinput">
<button id="taskcreator">Create new item</button>
<script>
    var taskCreator = document.querySelector('#taskcreator');
    var list = document.querySelector('ul');
    var taskInput = document.querySelector('#taskinput');
    taskCreator.addEventListener('click', function createNewTask(event) {
        list.innerHTML += '<li>' + taskInput.value + '</li>'
    })
</script>
</body>
</html>

或者在脚本中等待，直到整个文件都被解析为止。

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var taskCreator = document.querySelector('#taskcreator');
        var list = document.querySelector('ul');
        var taskInput = document.querySelector('#taskinput');
        taskCreator.addEventListener('click', function createNewTask(event) {
            list.innerHTML += '<li>' + taskInput.value + '</li>'
        })
    });
</script>

https://developer.mozilla.org/ru/docs/Web/Events/DOMContentLoaded

变量将DOM元素处理为null。为什么会这样呢？

1 个答案: