变量正在将 DOM 元素处理为空.为什么会这样

在此代码中，我尝试将 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>

当浏览器执行你的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

相关内容

最新更新

热门标签：