CODEWITHSUNDEEP
javascripthtml
George Sumpster
George Sumpster

Reputation: 49

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

<!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 :/

Upvotes: 0

Views: 16065

Answers (2)

Adam Heath
Adam Heath

Reputation: 4743

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

Upvotes: 4

su-
su-

Reputation: 3166

add

validatePhone();

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

Upvotes: 0

Related Questions