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

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

本文关键字:null 读取 属性 错误 类型 JAVASCRIPT      更新时间:2023-09-26
<!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 的属性'值',但由于我移动了它,它就消失了。但是,现在它不会输出任何错误,也不会执行任何操作。请帮忙?

对不起任何格式和事情,新的:/

编辑:

稍微不同的实现:http://jsfiddle.net/SfTR2/确保在HTML之后加载JS,或使用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

add

validatePhone();

到脚本的末尾(您定义了函数,但从未调用过它)。并将 innerhtml 更改为 innerHTML