Can Not Listen Enter Key on onkeypress Event for An Input Element

JavaScript
1

Hello all i am trying to add a new task to my to do app when user writes a task and presses enter. But it’s not working. What am i doing wrong?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <title>BGB's TODO</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        width: 100vw;
        height: 100vh;
    }

    body {
        background-color: #408E91;
        width: 100vw;
        height: 100vh;
    }

    #container {
        font-family: 'Indie Flower', cursive;
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #title-todo {
        font-size: 3rem;
        padding: 30px 0;
    }

    #input-container {
        display: flex;
        width: 50%;
    }

    input {
        background-color: #408E91;
        font-family: 'Indie Flower', cursive;
        padding: 3px;
        width: 80%;
        height: 20px;
        border-radius: 2px;
        border-block-end-width: 1px;
        border-block-end-color: black;
        border-block-end-style: solid;
        border-block-start-width: 0px;
        border-right-style: none;
        border-left-style: none;
        border-inline-end-style: none;
    }


    input:focus {
        outline: none;
    }

    button {
        font-family: 'Indie Flower', cursive;
        background-color: rgb(255, 172, 19);
        margin-left: 5px;
        width: 20%;
        transition-duration: 70ms;
    }

    button:hover {
        background-image: linear-gradient(rgb(255, 172, 19), rgb(255, 235, 197));
        cursor: pointer;
        border: 1px solid #fff;
    }

    ul {
        width: 50%;
        padding: 0;
    }

    li:nth-child(1) {
        margin-top: 20px;
        padding: 5px;
        list-style-type: none;
        border-left: 1px solid black;
    }

    li {
        margin-top: 3px;
        padding: 5px;
        list-style-type: none;
        border-left: 1px solid black;
        transition: 3s;
        transition-property: all;
    }
</style>

<body>
    <div id="container">
        <h2 id="title-todo">To Do App</h2>
        <div id="input-container">
            <input id="task-input" type="text" placeholder="Enter task here" />
            <button id="add-task-btn" type="button">Add</button>
        </div>
        <ul id="task-list"></ul>
    </div>
    <script>
        let taskInput = document.getElementById('task-input'); //Select input element
        let addTaskBtn = document.getElementById('add-task-btn'); //Select Button element 
        let ul = document.getElementById('task-list');//Select ul element
        // console.log(ul);
        let taskBorderColors = ["#FC2947", "#7149C6", "#62CDFF", "#5D9C59", "#BE6DB7", "#C9F4AA", "#FCE22A", "#FF8B13"];

        addTaskBtn.addEventListener('click', addTask);
        taskInput.addEventListener('onkeydown', function (event) {
            console.log("task input onkeypress executed");
            if (event.key == "Enter") {
                addTask();
            }
        });

        let previouslyShownColor;
        let rnd;
        let count = 0;
        console.log(count);

        function addTask(event) {
            console.log("add task executed.");
            console.log(event);
            if (taskInput.value == "") {
                alert("You've not entered a task yet.");
            } else {
                while (previouslyShownColor == rnd) {
                    rnd = Math.floor(Math.random() * taskBorderColors.length);
                }
                previouslyShownColor = rnd;
                let li = `<li id="task-${count + 1}" class="tasks" style="border-left: 3px solid ${taskBorderColors[rnd]}">${taskInput.value}</li>`;
                ul.insertAdjacentHTML("beforeend", li);
                taskInput.value = "";
            }
        };

    </script>
</body>

</html>
2 
taskInput.addEventListener('keydown', function (event) {
    console.log("task input onkeydown executed");
    if (event.key == "Enter") {
        addTask();
    }
});
3

Thanks a lot. I checked it several times to check for typos. It’s written onkeypress and onkeydown everywhere. Did i read it wrong? How did you decide to use only keydown?

4

onkeydown is an event attribute that fires when a user presses a key down. This event is fired when a key is pressed down and held.
Wat if Im not holding a enter key but just pres once?
Is this a same?
it should just be keydown without the on prefix, because the addEventListener method expects the event name as the first argument without the on prefix.
İyi geceler!

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.