Nodejs + html evt.target value is undefined

Question

Okay so here's my html code

document.getElementById('comment-form').addEventListener('submit', async (evt) => {
    evt.preventDefault();
    const userID = evt.target.userid.value;
    const comment = evt.target.comment.value;
    console.log(userID, comment);
    if(!userID) return alert('Input User ID');
    if(!comment) return alert('Input Comment');
})

<div>
    <form id="comment-form">
        <fieldset>
            <legend>Comment</legend>
            <div><input id="userid" type="text" placeholder="User ID"></div>
            <div><input id="comment" type="text" placeholder="Comment"></div>
            <button type="submit">Submit</button>
        </fieldset>
    </form>
</div>

and the console.log result is

undefined (Whatever comment I input)

And so my question is

1. why????? why I am getting comment's value while not getting userid's value? I thought for 2 hours still don't know why
2. If so, how can this not trigger my return alert? So for js undefined is not null? If so isn't that alert code don't work at all?

Here is what I've tried

1. Changing input id's value to something else.
2. Changing target to currentTarget
3. changing evt.target.userid to evt.target.getAttribute()

Edited - code snippet is added, and in the snippet it works. So it must be some kind of issue of callback or timing of js?? how can it be fixed??

It was timing issue at all. Use await.