Enter key not adding tasks to a list

[Kepler]

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!

[kevinSmith]

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:

Do you see the issue?

[Kepler]

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?

[kevinSmith]

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

[Kepler]

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.

[kevinSmith]

appendChild takes a node, not a string.

[Kepler]

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

[Kepler]

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.