开发者问题收集

JAVASCRIPT - 未捕获的类型错误：无法读取 null 的属性“value”

2012-08-13
16049
javascript html 
<!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>

嗨，当标签位于头部时，我收到错误“未捕获类型错误：无法读取 null 的属性‘值’”，但由于我移动了它，它就消失了。但是，现在它没有输出任何错误，也没有执行任何操作。请帮忙？

抱歉，格式和内容有问题，新问题 :/

2个回答

编辑：

稍微不同的实现方式： http://jsfiddle.net/SfTR2/ 确保 JS 在 HTML 之后加载，或者使用 window.onload

原始答案：

您需要在验证函数中获取长度： 

   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";
        }
    }

如前所述，您正在缓存空长度。

此外，正如 @su 提到的，您需要使用 innerHTML

Adam Heath
2012-08-13

将 

validatePhone();

添加到脚本末尾（您定义了该函数但从未调用过它）。并将 innerhtml 更改为 innerHTML

su-
2012-08-13