Adding element to the list on keypress and clearing the list-CodePudding

As in topic my job is to do a code where user writes some text into textbox and when user hits enter key, the text from the textbox should be added to ul list under Things header. I added also reset button but it's not working because adding elements to list isn't working but I think it should work when I will fix it. I don't know where I made mistake. Could anyone help me or give me advice what should I do?

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
</head>
<body>
    <h1 id="title">List</h1>

    <form>
        <input type="text" id="user-todo" placeholder="List" required>
    </form>

    <h2 id="todo-header">Things</h2>
    <ul id="list">

    </ul>
    <button id="clear">Reset</button>
    <script>
        var input = document.getElementById("user-todo");
        input.addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                // what happens when user hits ENTER
                $(document).ready(function() {
                    $('ul').append("<li>" ($('#user-todo').val())   "</li>");
                });
            }
        });

        function clear() {
            document.getElementById("list").innerHTML = '';
        }
    </script>
</body>

</html>

CodePudding user response：

It looks like you are on an outdated course, you can learn Modern JS at:

https://exploringjs.com/impatient-js/

https://phoenix35.js.org/

Dispensing the use of JQuery, a framework that is no longer necessary these days, you get:

const input = document.querySelector("#user-todo");
const clear = document.querySelector("#clear");
const list = document.querySelector("#list");

input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        const li = document.createElement("li");
        li.textContent = input.value;

        input.value = "";

        list.appendChild(li);
    }
});

clear.addEventListener("click", function() {
    list.innerHTML = "";
});

<!DOCTYPE html>
<html>
    <head>
        <title>List</title>
    </head>
    <body>
        <h1 id="title">List</h1>

        <form onsubmit="return false;">
            <input type="text" id="user-todo" placeholder="List" required> 
        </form>

        <h2 id="todo-header">Things</h2>
        <ul id="list"></ul>
        <button id="clear">Reset</button>
    </body>
</html>

CodePudding user response：

<!DOCTYPE html>
<html>

<head>
    <title>List</title>
</head>

<body>
    <h1 id="title">List</h1>


    <input type="text" id="user-todo" placeholder="List" required>

    <h2 id="todo-header">Things</h2>
    <ul id="list">

    </ul>
    <button onclick="clearFunction()">Reset</button>
    <script>

        function clearFunction() {
            document.getElementById("list").innerHTML = " ";
        }
        var input = document.getElementById("user-todo")
        var list = document.getElementById("list");

        input.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();

                var input_val = document.getElementById("user-todo").value;
                let li = document.createElement("li");
                li.innerText = input_val;
                list.append(li);
            }
        });

    </script>
</body>

CodePudding user response：

<!DOCTYPE html>
<html>

<head>
<title>List</title>
</head>

<body>
    <h1 id="title">List</h1>

    <form onsubmit="return false;">
        <input type="text" id="user-todo" placeholder="List" required>
    </form>

    <h2 id="todo-header">Things</h2>
    <ul id="list"></ul>
    <button id="clear">Reset</button>
    <script>
        var input = document.getElementById("user-todo");
        var list = document.getElementById("list");
        var reset = document.getElementById("clear");
        input.addEventListener("keyup", function(event) {
            console.log('keyCode is '   event.keyCode);
            if (event.keyCode === 13) {
                var item = document.createElement('LI');
                item.innerHTML = input.value;
                list.appendChild(item);
            }
        });
        reset.addEventListener("click", function(event) {
            list.innerHTML = '';
        });
    </script>
</body>

</html>

CodePudding user response：

If you change this line, it should work. https://codesandbox.io/s/exciting-sinoussi-ckw8b?file=/index.html

 input.addEventListener("keydown", function (event) {