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

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

javascript html dom

Javascript 变量将DOM元素处理为null。为什么会这样？,javascript,html,dom,Javascript,Html,Dom,在这段代码中，我试图将DOM元素分配给变量，但变量得到值null。为什么会这样？我犯了什么错误吗 <!DOCTYPE html> <html> <head> <title>Tasks</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s

在这段代码中，我试图将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>


任务
var taskCreator=document.querySelector（“#taskCreator”）；
var list=document.querySelector（'ul'）；
var taskInput=document.querySelector（“#taskInput”）；

创建新项目

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


任务

创建新项目
var taskCreator=document.querySelector（“#taskCreator”）；
var list=document.querySelector（'ul'）；
var taskInput=document.querySelector（“#taskInput”）；
taskCreator.addEventListener（'click'，函数createNewTask（事件）{
list.innerHTML+=''+taskInput.value+''
})

或者在脚本中等待整个文件被解析

<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>


document.addEventListener（“DOMContentLoaded”，函数（）{
var taskCreator=document.querySelector（“#taskCreator”）；
var list=document.querySelector（'ul'）；
var taskInput=document.querySelector（“#taskInput”）；
taskCreator.addEventListener（'click'，函数createNewTask（事件）{
list.innerHTML+=''+taskInput.value+''
})
});

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


任务

创建新项目
var taskCreator=document.querySelector（“#taskCreator”）；
var list=document.querySelector（'ul'）；
var taskInput=document.querySelector（“#taskInput”）；
taskCreator.addEventListener（'click'，函数createNewTask（事件）{
list.innerHTML+=''+taskInput.value+''
})

或者在脚本中等待整个文件被解析

<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>


document.addEventListener（“DOMContentLoaded”，函数（）{
var taskCreator=document.querySelector（“#taskCreator”）；
var list=document.querySelector（'ul'）；
var taskInput=document.querySelector（“#taskInput”）；
taskCreator.addEventListener（'click'，函数createNewTask（事件）{
list.innerHTML+=''+taskInput.value+''
})
});

在构建DOM之前，将对JavaScript代码进行评估。因此，代码查找的元素将不在DOM中。将

移动到

标记之前。在创建dom内容之前执行脚本。将脚本放在页面末尾修复加载问题后，您还有另一个问题。代码

list+=''+taskInput.value+'
'

毫无意义。您将DOM元素视为字符串。这不是向DOM添加元素的方式。在构建DOM之前，将对JavaScript代码进行评估。因此，代码查找的元素将不在DOM中。将

移动到

标记之前。在创建dom内容之前执行脚本。将脚本放在页面末尾修复加载问题后，您还有另一个问题。代码

list+=''+taskInput.value+'
'

毫无意义。您将DOM元素视为字符串。这不是向DOM添加元素的方式。这仍然是错误的。。。代码中有两个问题，您修复了一个。同意，代码中有两个问题。（列表+='

'+taskInput.value+'

'-错误）。但第二个问题不是问题。无论如何，谢谢你的关注。我已经编辑了我的答案，但这仍然是错误的。。。代码中有两个问题，您修复了一个。同意，代码中有两个问题。（列表+='

'+taskInput.value+'

'-错误）。但第二个问题不是问题。无论如何，谢谢你的关注。我已经编辑了我的答案。