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?. — Sebastian Simon
– Sebastian Simon, Commented Nov 22, 2020 at 2:23

Ousmane D. · Accepted Answer · 2017-04-10 02:24:06Z

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, 2017 at 2:24

answered Apr 10, 2017 at 1:51

Ousmane D.

56.6k8 gold badges101 silver badges134 bronze badges

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

2 Comments

Marty Over a year ago

Be careful when you say that it returns an Array. It returns a HTMLCollection, not an array.

Ousmane D. Over a year ago

@Marty sure thing, I'll add that. Thanks for letting me know.

Joshua Russell · Accepted Answer · 2017-04-10 01:52:03Z

3

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!

answered Apr 10, 2017 at 1:52

Joshua Russell

7005 silver badges14 bronze badges

Comments

Tim Erickson · Accepted Answer · 2022-05-18 14:09:17Z

1

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, 2022 at 14:09

Tim Erickson

5926 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to get value from input type = number?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related