未捕获的类型错误：无法读取 null、HTML 和 Javascript 的属性“值”答案

【问题标题】：Uncaught TypeError: Cannot read property 'value' of null, HTML & Javascript未捕获的类型错误：无法读取 null、HTML 和 Javascript 的属性“值”
【发布时间】：2019-03-07 05:11:14
【问题描述】：

我有一个 HTML 文件：

<form id="form">      
    <div class="input">
      <input id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
      m<input id="email" type="email" name="email" placeholder="Email">
    </div>
    <div class="input">
      <input id="password1" type="password" name="password_1" placeholder="Password">
    </div>
</form>

我尝试使用链接到上面 HTML 文件的 javascript 文件来获取任何输入值：

var password2 = document.querySelector("#email").value;
var register = document.querySelector("#password1").value;

这个想法是，一旦用户输入了某些内容，将输入值存储在Firebase 中。但我根本无法获取输入值。它显示：

未捕获的类型错误：无法读取 null、HTML 和的属性“值” Javascript

当我加载文件时

有什么建议吗？

【问题讨论】：

确保在页面底部加载脚本
"一旦用户输入内容" 您是如何检测到用户输入内容的？这些行是如何以及何时执行的？请注意，如果您直接在头部或身体中执行这些行，那么用户此时肯定没有输入任何内容。当用户输入内容时，您需要一个 event 来监听。另请注意，form 元素将表单数据提交到您的服务器，您还没有为提交准备表单。

标签： javascript html

【解决方案1】：

这是一个非常基本的错误，因为，

目标元素未加载，但查询已已执行。

这个问题的非常简单的解决方案就是***

把你的脚本放在body标签结束之前。

如下图

        <script>

        //your code here

        </script>
    </body>
</html>

希望您的问题现在得到解决。

【讨论】：

@Y。 Chen hopw 你的问题在这个答案之后得到了解决。如果仍有任何疑问，请随时询问..

【解决方案2】：

document.queryselector 返回 null 或 undefined 如果 DOM 没有加载这些 HTML 元素，请检查 DOM 是否已加载，然后在 document.ready 中使用 queryselector。
它应该可以解决您的问题。

【讨论】：

【解决方案3】：

当您尝试访问它们时，您的 DOM 尚未加载。

改为使用 jQuery Onload() 来获取 DOM 元素的值。

在加载 DOM 和图像等资源时执行 Onload()。

【讨论】：

【解决方案4】：

您是否打算设置 password2 的范围并将全局注册到文档？您可以声明它们 - 以便将它们全局限定在页面范围内 - 而无需尝试引用在用户输入它们后您将实际从中检索值的元素。只需使用任何占位符值或无值声明变量。

var password2 = null;
var register = null;

或

var password2;
var register;

可以稍后添加/更改值，并且变量将保留其范围。

添加 - - - - - - - - - - -

我想我可能完全误读了这个请求，但我对此表示怀疑。 OP 已尝试从尚未解析为文档上下文的页面项目中读取。所有回应都同意这是“问题所在”。但是，其他回答都没有解决真正的问题，“为什么要在当前位置（即在页面完成加载之前）完成获取值的尝试？”即使在页面完成加载之后，阅读也没有任何价值。用户尚未更改这些值。

OP 的意图是什么？正如OP所述，所有其他答案都解决了如何“解决问题”的问题。我建议 OP 不明白真正的问题是他试图做一些不必要的事情，即在他试图阅读它们时读取没有用处的值。

我建议并且没有其他猜测，声明变量并导致崩溃的语句是由于 OP 打算将变量放入页面范围而产生的。如果有人有更好或简单的替代建议，请提供它并可能提供解决方案。让我们接受，帮助 OP 了解更广泛的编程世界意味着不仅仅是迎合他对问题的可能天真的理解。我们可能需要纠正他对问题所在的概念。

【讨论】：