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 But you probably want to have all this run during the form submit event — Ben Stephens, Aug 13 '12 at 04:32

Adam Heath · Accepted Answer · 2012-08-13T04:43:51.570

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 '12 at 04:43

answered Aug 13 '12 at 04:33

Adam Heath

4,703
2
35
50

1

what if we assign `var phonenum` outside of function. i think that way is also okay. – xkeshav Aug 13 '12 at 04:36
Yeah it is, as long as you get the length (and the value) within the function. – Adam Heath Aug 13 '12 at 04:37
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](http://jsfiddle.net/KsW8E/) – xkeshav Aug 13 '12 at 04:42
How to Make sure that the JS is loaded after the HTML ? is there any way. AFAIT JS is always loaded after pageload – xkeshav Aug 13 '12 at 04:49
Thank you, this works. I think I understand it, so when the input changes, it runs the function? – George Sumpster Aug 13 '12 at 04:54
When the input changes and the user focuses on something else on the page (clicks outside the field or tabs out of the field). See https://developer.mozilla.org/en-US/docs/DOM/element.onchange – Adam Heath Aug 13 '12 at 08:18
@diEcho is the JS is in the `` or is placed before the form element(s) then it would not work, as it cannot get the DOM element that does not exist yet. As long as the JS is below the HTML element then it will be okay. `onload` or `domcontentloaded` is generally better though. – Adam Heath Aug 13 '12 at 08:20

score 0 · Answer 2 · answered Aug 13 '12 at 04:32

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 '12 at 04:32

su-

3,116
3
32
42

Don't forget that the assignment of phonenum is outside the function. – ChaosPandion Aug 13 '12 at 04:33
Alright, that seemed to work to an extent, but it doesn't update on change? (or blur, or whatever) – George Sumpster Aug 13 '12 at 04:40
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. – su- Aug 13 '12 at 04:45

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

2 Answers2

Linked