How to get value from input type = number?

Question

Problem

So my problem is that I have an <input type='number'>, and I'm trying to get the value of the input when the user clicks enter and console.log() the value. But when I tested, it returned undefined.

Input

<input type="number" value="0" placeholder="Enter Number..." class="insert">

JavaScript

function main() {

        var input = document.getElementsByClassName('insert');

        document.addEventListener('keydown', function(e) {
            if(window.event == 13 || e.which == 13) {

                var num = input.value;

                console.log(num)

                /*if(num < 0) {
                    alert('Please enter a positive number');
                }*/

            }
        })

    }

    window.onload = main;

Duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/q/10693845/4642212). — Sebastian Simon, Nov 22 '20 at 02:23

Ousmane D. · Accepted Answer · 2017-04-10T02:24:06.083

5

know that document.getElementsByClassName(...) returns a HTMLCollection regardless of whether there is only one element or more.

what you want is this:

var num = input[0].value;

note - typically, if you want to target only one element, you should use an id attribute on that element and then use document.getElementById(...) to retrieve the value of the element.

edited Apr 10 '17 at 02:24

answered Apr 10 '17 at 01:51

Ousmane D.

54,915
8
91
126

1

Be careful when you say that it returns an `Array`. It returns a `HTMLCollection`, not an array. – Marty Apr 10 '17 at 02:11
1

@Marty sure thing, I'll add that. Thanks for letting me know. – Ousmane D. Apr 10 '17 at 02:23

score 3 · Answer 2 · answered Apr 10 '17 at 01:52

The problem is that you're selecting the inputs with getElementsByClassName. This will return a HTMLCollection (essentially an Array).

To avoid this, you can either use getElementById or use input[0].value which will get the value of the first item in the collection. Given it's a single input, this will work, however not the best approach.

If you have multiple inputs, you would need to loop. For example

var inputs = document.getElementsByClassName('insert');

for(var i = 0; i < inputs.length; i++) {
  console.log(inputs[i].value);
}

Hope that helps!

score 0 · Answer 3 · answered May 18 '22 at 14:09

0

What they said, plus note: you're using <input type="number"> but when you get that .value, it's going to be a string. Your num < 0 comparison will work, but other operations might produce unwanted results.

answered May 18 '22 at 14:09

Tim Erickson

582
5
15

How to get value from input type = number?

3 Answers3