How to get multiple input to use keypress function? Javascript HTML

Question

How do I get multiple input types to use keypress enter? Here's my code.

//keypress enter
var input = document.getElementById("cost");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("calc").click();
  }
});

As you can see, this code can only pull 1 element at a time.

score 3 · Accepted Answer · answered Dec 31 '19 at 06:53

3

Use querySelectorAll to select all the input type elements and then apply a loop to assign event listeners to them:

var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById("calc").click();
    }
  });
}

answered Dec 31 '19 at 06:53

Ankita Kuchhadiya

1,255
6
16

Awesome, this worked great. Thank you, Ankita. – Foxseiz Dec 31 '19 at 06:56
1

@Foxseiz glad to help :) – Ankita Kuchhadiya Dec 31 '19 at 06:57

score 2 · Answer 2 · answered Dec 31 '19 at 06:59

you just need to select all the input element using getElementsByClassName and apply the event listener to all of them. J

var input = document.getElementsByClassName("cost");
Array.from(input).forEach(function (element) {
 element.addEventListener("keyup", function (event) {

  if (event.keyCode === 13) {
   event.preventDefault();
   console.log("input changed")
  }
 });
});

<input class="cost"/>
<input class="cost"/>

How to get multiple input to use keypress function? Javascript HTML

2 Answers2