Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript – Cannot read properties of undefined (reading 'length') – (Code does work and provided)

I have looked at many different methods here on SO, and neither of them will resolve the issue I am facing. If anything, they all still show the same Error.

The count starts when you type a number in the field and add a decimal.
Typing in 100.1 will show 1
However, when you first click on the field, you will get the Uncaught TypeError.
Cannot read properties of undefined (reading 'length')
The code is originally written with a hardcoded value.
const numb = 45.36346323
I changed it to get the value from an input field.
I then added a .keyup(function) to detect when you are typing in the field.
I’ve added more to the code I have, but I am providing the bare code without all the other stuff.
The code works that I have, and it works well. I just don’t like the Uncaught TypeError.

Could someone please instruct me on what I need to do to resolve this Uncaught TypeError?
As stated, the code does its job; it does work. I just don’t like that blasted Error.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="text" id="StationID" name="StationID" value="" >

   <p id = "para1"></p>

   
   <script>
$("#StationID").keyup(function(){
      const numb = document.getElementById("StationID").value;
         function count(numb) {

           if (Number.isInteger(numb)) {
               return 0;
            } else { //Error on this line, as the script was designed with a Hardcoded value. Now, it is from the INPUT value of StationID.

               return numb.toString().split('.')[1].length;   // Error on this line

            }
            }
         document.getElementById("para1").innerHTML = "Decimal count: " + count(numb);
         
});
    </SCRIPT>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Silvio above, I was able to figure it out.
    Wrapping the following code around, it worked.

    if(!numb.split(".")[1]){return 0;}{

    So, the code looks like this.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="text" id="StationID" autocomplete="off" name="StationID" value="" >

   <p id = "para1"></p>

   
   <script>
$("#StationID").keyup(function(){
      const numb = document.getElementById("StationID").value;
         function count(numb) {
if(!numb.split(".")[1]){return 0;}{
           if (Number.isInteger(numb)) {
               return 0;
            } else {
               return numb.toString().split('.')[1].length;
            }
            }
            }
         document.getElementById("para1").innerHTML = "Decimal count: " + count(numb); 
});
    </SCRIPT>

    Thanks, Silvio


  2. 0

    Because you are not initializing with 45.36 , the initial value is an empty string ”. When it goes in function count , the first time it runs the IF statement is false since Number.isInteger(”) is false.

    On the else statement you are trying to split a string at the . character, however it is an empty string and it results on an empty array, therefore trying to get split(‘.’)[1] throws.

    To solve you could either check if the value is empty by adding a new if on top or adding an OR to the first if.

    for instance as first line of function count you can add

    if(numb === '') { return 0; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search