javascript to-do list not adding new entry to to-do list

Question

So,I'm trying to make a to-do list but nothings happening when I try to add a new list entry,any tips? Also,eventually I want it to be able to count the percentage of how many tasks I've clicked on ,aka crossed off the list.

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

Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag. — Andy G, Nov 15 '18 at 14:28
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null" — epascarello, Nov 15 '18 at 14:30

score 1 · Answer 1 · answered Nov 15 '18 at 14:28

Try to add the script underneath the button. Else your JavaScript can't find the button because it isn't loaded yet.

So something like this:

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

javascript to-do list not adding new entry to to-do list

1 Answers1