How To Trigger Button Click on Enter in JavaScript

Question

The addEventListener on click is working but on event.keypress or event.code dont. I can't understand why? I tried to add key code, with and without "", tried to remove default, with indication of object length (inputLength() > 0 && event.code "Enter") etc.. still nothing. Can't find a solution in existent threads((.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");


function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

button.addEventListener("click", function() {
    if (inputLength() > 0) {
        createListElement();
    }
})

button.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.key === "Enter") {
        createListElement();
    }
})

jayooking · Accepted Answer · 2022-09-11 09:38:53Z

3

Try changing "keyup" to "keypress":

button.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.key === "Enter") {
        createListElement();
    }
})

answered Sep 11, 2022 at 9:38

jayooking

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user13451259 · Accepted Answer · 2021-11-22 18:45:33Z

1

For addEventListener, you may need a third argument false e.g. button.addEventListener("click",function(){blah},false);

answered Nov 22, 2021 at 18:45

user13451259

Comments

Ethan Agar · Accepted Answer · 2021-11-22 19:15:05Z

1

button.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.key === 'Enter') {
    // Cancel the default action, if needed
    event.preventDefault();
    //now do what you want to do.
    createListElement();  
}
} false);

I just want to say, that you should definetly use google more often. I was able to find the anwser after 1 google search. Anyways hope this helps.

edited Nov 22, 2021 at 19:15

answered Nov 22, 2021 at 18:45

Ethan Agar

1029 bronze badges

2 Comments

munteanu dan Over a year ago

Thank you for such a quick answ. i tried it already, it dont work because event.keyCode is deprecated and how i mentioned before with other (event.keypress or event.code ) still dont work.

Ethan Agar Over a year ago

try event.key === 'Enter', and also do what the guy said above me, put false before the last bracket in the addEventListener.@m

ZygD · Accepted Answer · 2021-11-23 08:03:36Z

0

I found the right way:

function addListAfterKeyPress(event) {
    if (inputLength() > 0 && event.key === "Enter") {
        createListElement();
    }
}

edited Nov 23, 2021 at 8:03

ZygD

24.8k41 gold badges106 silver badges144 bronze badges

answered Nov 23, 2021 at 7:24

munteanu dan

531 silver badge9 bronze badges

Collectives™ on Stack Overflow

How To Trigger Button Click on Enter in JavaScript

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related