Enter key not adding tasks to a list

JavaScript
1

Hi, I’m trying to create a simple to do list project, I want to use the enter key as the only way to submit the input and add it to the to do list, but right now the enter key does nothing.

here is the codepen link: https://codepen.io/Kelpee/pen/xxJLyrG

Most solutions I found use both a submit button and the enter key to add tasks to the list, and they use the submit button’s id to declare in js. I don’t have a submit button so I used the text-input field (id = “things”) to declare addInput and added eventListener keyup, I’m not sure if that is the problem (if that makes sense?)

any help would be appreciated!

2

If I add a log to your code:

addInput.addEventListener('keyup', (event) => {
  console.log('event', event)
    if(event.code === 13) {
        event.preventDefault();
        addLists();
    }
});

When I check the logs for the Enter key, I see this:

Screenshot 2023-01-16 at 15.00.07
Screenshot 2023-01-16 at 15.00.07440×998 77.8 KB

Do you see the issue?

3

Hi, thanks for the reply!

I’m not really familiar with js but I think currentTarget: null is the problem? I looked up what it is and if I’m not mistaken it’s used for identifying the current target for the event and referring to the element that the event handler is attached to, so if the element that is supposed to be attached to the event handler is null, then it would make sense why the event is not occurring, or I could be completely wrong.

Also, if you don’t mind explaining, why would defaultPrevented to be false?

4

You are checking event.code. What is it in your data? What about event.keyCode?

5

Sorry, I don’t think I can understand your reply based on my knowledge. I did some research but I only got more confused… also apology in advance for a long reply, I just want to explain my thinking process

So far I know event.code is the physical copy of the key on a keyboard, so event.code of Q would be keyQ? event.keyCode would be a numerical code for the key, so Q would be 81. I couldn’t find event.code for key enter so maybe that is what you meant by “You are checking event.code”, so I changed it to:

addInput.addEventListener('keyup', (event) => {
    console.log('event', event)
    if(event.keyCode === 13) {
        event.preventDefault();
        addLists();
    }
});

When I console logged it, it says line 8 and 15 have errors, it can’t execute “appendChild” from function “addLists”, so I looked further into it, it says parameter 1 is not of type “Node”, but I checked StackOverflow it seems like as long as you used document.createElement it is node, and that is what I did in the function addLists, so that is where I’m stuck at.

6

appendChild takes a node, not a string.

1 Like
7 
    ul.appendChild('li');

There are two issues really. The first was pointed out by @kevinSmith . The second is the actual argument you are passing to appendChild. Do you want to append the string li or the variable li to ul?

1 Like
8

On a separate note, not sure why you added:

event.preventDefault()

It is not doing anything for you. It is not hurting anything either but there is no reason to add pointless code.

Another note is the function name addLists does not really describe what the function is trying to do. I would recommend renaming it to addItem which better describes the task desired. addLists sounds like when called, it would be adding multiple lists to something instead of a single item to a list.

9

thank you, I realized I put a string instead of a node in the parameter!

10

thank you, the only reason I added event.preventDefault() is because I saw other people had it in their solutions on StackOverflow but now I realized they used form and I don’t, so it indeed doesn’t apply to my situation.

and yes, I will work on naming functions properly lol.