javascript待办事项列表不向待办事项列表添加新条目_Javascript_Html_Css

javascript待办事项列表不向待办事项列表添加新条目

javascript html css

javascript待办事项列表不向待办事项列表添加新条目,javascript,html,css,Javascript,Html,Css,所以，我试图制作一个待办事项列表，但当我尝试添加一个新的列表条目时，什么都没有发生，有什么提示吗？另外，我希望它最终能够计算出我点击了多少任务，也就是从列表中划掉了多少任务 <html> <head> <title>Site</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no

所以，我试图制作一个待办事项列表，但当我尝试添加一个新的列表条目时，什么都没有发生，有什么提示吗？另外，我希望它最终能够计算出我点击了多少任务，也就是从列表中划掉了多少任务

<html>
<head>
<title>Site</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>document.getElementById("todoadd").onclick  = function() {

        var node = document.createElement("Li");
        var text = document.getElementById("uzd").value;
        var textnode =document.createTextNode(text);
        node.appendChild(textnode);
        document.getElementById("uzduotys").appendChild(node);
    } 
    </script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <form>
        <div id="myDIV" class="header">
            <h2>To-Do</h2>
            <input type="text" id='uzd' placeholder="Užduotis">
            <input type="button" id='todoadd' >
        </div>
    </form>
    <ul id='uzduotys'>

    </ul>
</div>
</body>
</html>


地点
document.getElementById（“ToLoadd”）.onclick=function（）{
var节点=document.createElement（“Li”）；
var text=document.getElementById（“uzd”）.value；
var textnode=document.createTextNode（文本）；
node.appendChild（textnode）；
document.getElementById（“uzduotys”）.appendChild（节点）；
} 
做

尝试在按钮下方添加脚本。否则您的JavaScript找不到该按钮，因为它尚未加载

比如说：

<html>
    <head>
        <title>Site</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="container">
            <form>
                <div id="myDIV" class="header">
                    <h2>To-Do</h2>
                    <input type="text" id='uzd' placeholder="Užduotis">
                    <input type="button" id='todoadd' >
                </div>
            </form>
            <ul id='uzduotys'>

            </ul>
        </div>
        <script>
            document.getElementById("todoadd").onclick = function(){
                var node = document.createElement("Li");
                var text = document.getElementById("uzd").value;
                var textnode =document.createTextNode(text);
                node.appendChild(textnode);
                document.getElementById("uzduotys").appendChild(node);
            } 
       </script>
    </body>
</html>


地点
做


document.getElementById（“ToLoadd”）.onclick=function（）{
var节点=document.createElement（“Li”）；
var text=document.getElementById（“uzd”）.value；
var textnode=document.createTextNode（文本）；
node.appendChild（textnode）；
document.getElementById（“uzduotys”）.appendChild（节点）；
}

浏览器控制台中是否存在错误？但是在页面上的元素可用之前运行代码；在结束body tag.code在上面工作之前，将脚本移到底部，那么有什么不同呢？控制台中有错误吗？类似于“UncaughtTypeError:无法读取null的属性'onclick'