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>

嗨，当标签在头部时，我收到错误'未捕获的TypeError：无法读取属性'的'null'，但是因为我移动它，它就消失了。但是，现在它输出没有错误并且没有任何错误。请帮帮忙？

抱歉任何格式和内容，新：/

Answer 1

修改

稍微不同的实现有效：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

Answer 2

添加

validatePhone();

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

JAVASCRIPT - 未捕获的TypeError：无法读取null的属性“value”

2 个答案: