JAVASCRIPT - Uncaught TypeError: Cannot read property 'value' of null

Question

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
        <title>Javascript Form Testing</title>
</head>

<body>
Name: <input type="text" name="Name" value="Name" id="fname"> <br>
Email: <input type="text" name="Email" value="Email" id="mail" > <br>
Phone: <input type="text" name="Number" value="Phone Number" id="dvr" onchange="validatePhone();">
<span id="phoneval"> ?</span>

    <script type="text/javascript">
    phonenum = document.getElementById("dvr").value.length;
       function validatePhone() {
            if (phonenum == 10){
                document.getElementById('phoneval').innerhtml="<-- Valid";
            }
            else{
                document.getElementById('phoneval').innerhtml="<-- Not Valid";
            }
        }
    </script>
</body>
</html>

Hi, I was getting the error 'Uncaught TypeError: Cannot read property 'value' of null' when the tag was in the head, but since I moved it, it went away. However, now it outputs no error and does NOTHING. Please help?

Sorry for any formatting and things, new :/

I don't want to submit an answer since I'm actually at work atm. Firstly the big thing is that nothing is calling validatePhone().. if you just want it to run as soon as the dom is loaded (but before assets are loaded) then you could just put the call to validatePhone() right before </script> But you probably want to have all this run during the form submit event — Ben Stephens
– Ben Stephens, Commented Aug 13, 2012 at 4:32

Adam Heath · Accepted Answer · 2012-08-13 04:43:51Z

4

Edit:

Slightly different implementation that works: http://jsfiddle.net/SfTR2/ Make sure the JS is loaded after the HTML, or use window.onload

Original answer:

You need to get the length within the validation function:

   function validatePhone() {
        var phonenum = document.getElementById("dvr").value.length; //MOVE IT HERE
        if (phonenum == 10){
            document.getElementById('phoneval').innerHTML="<-- Valid";
        }
        else{
            document.getElementById('phoneval').innerHTML="<-- Not Valid";
        }
    }

As previously you were caching the empty length.

Also, as @su mentioned, you need to use innerHTML

edited Aug 13, 2012 at 4:43

answered Aug 13, 2012 at 4:33

Adam Heath

4,7832 gold badges38 silver badges52 bronze badges

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

7 Comments

xkeshav Over a year ago

what if we assign var phonenum outside of function. i think that way is also okay.

Adam Heath Over a year ago

Yeah it is, as long as you get the length (and the value) within the function.

xkeshav Over a year ago

if we define some variable outside the function then its scope would be global and that can be used in any function. see the demo

xkeshav Over a year ago

How to Make sure that the JS is loaded after the HTML ? is there any way. AFAIT JS is always loaded after pageload

George Sumpster Over a year ago

Thank you, this works. I think I understand it, so when the input changes, it runs the function?

|

su- · Accepted Answer · 2012-08-13 04:32:26Z

0

add

validatePhone();

to the end of the script (you defined the function but never called it). And change innerhtml to innerHTML

answered Aug 13, 2012 at 4:32

su-

3,1763 gold badges34 silver badges44 bronze badges

3 Comments

ChaosPandion Over a year ago

Don't forget that the assignment of phonenum is outside the function.

George Sumpster Over a year ago

Alright, that seemed to work to an extent, but it doesn't update on change? (or blur, or whatever)

su- Over a year ago

To make onchange work, you need to move var phonenum = document.getElementById("dvr").value.length; into the validatePhone function (as in Adam Heath's answer), so that it gets the updated value of phone number.

Collectives™ on Stack Overflow

JAVASCRIPT - Uncaught TypeError: Cannot read property 'value' of null

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related