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

【问题标题】：JAVASCRIPT - Uncaught TypeError: Cannot read property 'value' of nullJAVASCRIPT - 未捕获的类型错误：无法读取 null 的属性“值”
【发布时间】：2012-08-13 12:43:51
【问题描述】：

<!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 的属性“值””，但由于我移动了它，它就消失了。但是，现在它没有输出错误并且什么都不做。请帮忙？

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

【问题讨论】：

我不想提交答案，因为我实际上在工作。首先最重要的是没有调用 validatePhone().. 如果您只是希望它在加载 dom 后立即运行（但在加载资产之前），那么您可以在之前调用 validatePhone() script> 但您可能希望在表单提交事件期间运行所有这些
Javascript 区分大小写，应该是innerHTML

标签： javascript html

【解决方案1】：

编辑：

工作原理略有不同：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

【讨论】：

如果我们在函数之外分配var phonenum 会怎样。我觉得这样也行。
是的，只要你在函数中得到长度（和值）。
如果我们在函数之外定义了一些变量，那么它的作用域就是global并且可以在任何函数中使用。见demo
如何确保 JS 在 HTML 之后加载？有什么办法吗。 AFAIT JS 总是在页面加载后加载
谢谢，这行得通。我想我明白了，所以当输入发生变化时，它运行函数？

【解决方案2】：

添加

validatePhone();

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

【讨论】：

别忘了phonenum的赋值是在函数之外的。
好吧，这似乎在一定程度上有效，但它不会随着变化而更新？（或模糊，或其他）
要使 onchange 工作，你需要移动 var phonenum = document.getElementById("dvr").value.length;进入 validatePhone 函数（如 Adam Heath 的回答），以便它获取电话号码的更新值。