can't get input type number value

Question

<div class="spacing">
   <h5>Bill</h5>
   <label for="bill"></label>
   <input id="bill" type="number" name="bill" value="">
</div>

<script>
const bill = document.querySelector("#bill");

bill.addEventListener("input", function (e) {
console.log(bill.value);
})
</script>

i keep getting this error -- Uncaught TypeError: Cannot read property 'addEventListener' of null.

is your script below or above the input element in the file? I'm guessing above - therefore the element doesn't yet exist, therefore the fail — Bravo, Jul 31 '21 at 06:10

Amit Verma · Answer 1 · 2021-07-31T06:33:44.570

0

Try this. You are reading control before document is ready.

Solution 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>       
$(document).ready(function () {
   const bill = document.getElementById("bill");
   bill.addEventListener("input", function (e) {
   console.log(bill.value);
  })
});
</script>

Solution 2 Without JQuery

<script>
    function printVal() {
       const bill = document.getElementById("bill");
       if (bill != null) {
          bill.addEventListener("input", function (e) {
          console.log(bill.value);
        });
      }
    }           
</script>

<div class="spacing">
  <h5>Bill</h5>
  <label for="bill"></label>
  <input id="bill" type="number" name="bill" onkeypress="printVal();">
</div>

edited Jul 31 '21 at 06:33

answered Jul 31 '21 at 06:19

Amit Verma

2,450
2
8
21

reason for downvote and it is too fast. – Amit Verma Jul 31 '21 at 06:20
it can be other solution but my solution is also working. you can also suggest your solution. OP will opt better answer. – Amit Verma Jul 31 '21 at 06:21
Yes, but 1) the question hasn't tagged jQuery, and 2) you don't use any jQuery for any other part of your answer. Why introduce a big JS resource when you can use vanilla JS to check if the document is ready? – Andy Jul 31 '21 at 06:22
I was modifying but some one down voted immediately. – Amit Verma Jul 31 '21 at 06:25
JQuery is slower than Vannila Javascript – Rinshan Kolayil Jul 31 '21 at 06:30
@RinshanKolayil Please share your answer too. The OP will opt better one. – Amit Verma Jul 31 '21 at 06:34
I am getting output with same code he given. I think it is some debugging issue. May be Mr.Bravo comment to the answer might be the reason – Rinshan Kolayil Jul 31 '21 at 06:35
My point was @AmitVerma if you're going to introduce jQuery [use it for all the code](https://jsfiddle.net/q6o2cw7j/). – Andy Jul 31 '21 at 06:46
Yeah my badd! Script wasn't below the code. – Ali Jul 31 '21 at 06:55
Btw thanks for different solutions. – Ali Jul 31 '21 at 06:56

Andy · Answer 2 · 2021-07-31T07:53:14.367

0

Either move your script to just before the </body> tag so you ensure that the DOM has loaded successfully before you try and access it, or use the DOMContentLoaded event to check to see if the DOM has loaded before performing any operations on it.

You should also reference the value of the target of the event you pass into the listener rather than bill.

window.addEventListener('DOMContentLoaded', () => {
  const bill = document.querySelector("#bill");
  bill.addEventListener('input', (e) => {
    console.log(e.target.value);
  });
});

<div class="spacing">
  <h5>Bill</h5>
  <label for="bill"></label>
  <input id="bill" type="number" name="bill" value="">
</div>

edited Jul 31 '21 at 07:53

answered Jul 31 '21 at 06:34

Andy

61,948
13
68
95

How about closing this as a dupe instead of adding yet another answer that's already available in [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) ? – Andreas Jul 31 '21 at 07:00
_"You should also reference the value of the target of the event you pass into the listener rather than `bill`"_ - Why? `bill.value` would absolutely work. And why `e.target.value` and not `this.value`? – Andreas Jul 31 '21 at 07:01

KooiInc · Answer 3 · 2021-07-31T06:45:15.897

0

The script tag should be after the html you want to apply the handler to, preferrably right before the closing body tag.

Another way to make this work is to use event delegation. The input handler is attached to the document. Detection of the input element is done within the handler function. In that case the script placement doesn't matter.

Example

<script>
  document.addEventListener(`input`, evt => {
    if (evt.target.id === `bill` && evt.target.value.trim().length) {
      console.log(evt.target.value);}
    });
</script>

<div class="spacing">
  <h5>Bill</h5>
  <label for="bill"></label>
  <input id="bill" type="number" name="bill" value="">
</div>

edited Jul 31 '21 at 06:45

answered Jul 31 '21 at 06:34

KooiInc

119,216
31
141
177

How about closing this as a dupe instead of adding yet another answer that's already available in [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) ? – Andreas Jul 31 '21 at 06:59

score 0 · Answer 4 · answered Jul 31 '21 at 06:34

0

you have to convert it into integer

<script>
  const bill = document.querySelector("#bill");
  bill.addEventListener("input", function (e) {
    var a = parseInt(bill.value);
    console.log(bill.value);
    console.log(typeof a);
  })
</script>

answered Jul 31 '21 at 06:34

krishna Parekh

11
2

Rinshan Kolayil · Answer 5 · 2021-07-31T07:05:03.523

This error might be some debugging issue as mentioned by Mr. Bravo in the comment. I am getting the output with same code you given.

const bill = document.querySelector("#bill");
bill.addEventListener("input", function(e) {
    console.log(this.value); // You can use `this` keyword
});

<div class="spacing">
  <h5>Bill</h5>
  <label for="bill"></label>
  <input id="bill" type="number" name="bill" value="">
</div>

But following code gives me error as you got Uncaught TypeError: Cannot read property 'addEventListener' of null

<script>
    const bill = document.querySelector("#bill");
    bill.addEventListener("input", function(e) {
        console.log(this.value);
    });
</script>
<div class="spacing">
    <h5>Bill</h5>
    <label for="bill"></label>
    <input id="bill" type="number" name="bill" value="">
</div>

can't get input type number value

5 Answers5