未捕获的TypeError:无法读取null,HTML和Javascript的属性“value”

问题描述 投票:1回答:4

我有一个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中。但我根本无法获取输入值。表明 :

未捕获的TypeError:无法读取null,HTML和Javascript的属性“value”

当我加载文件

请问有什么建议吗?

javascript html
4个回答
0
投票

这是非常基本的错误,因为,

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

解决这个问题的简单方法就是***

在关闭body标签之前将脚本放好。


如下

        <script>

        //your code here

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

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


0
投票

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


0
投票

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

而是使用jQuery Onload()来获取DOM元素的值。

当加载DOM和像图像这样的资源时,会执行Onload()。


0
投票

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

var password2 = null;
var register = null;

要么

var password2;
var register;

可以在以后添加/更改值,变量将保留其范围。

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

我想我可能完全误读了这个请求,但我对此表示怀疑。 OP已尝试从尚未解析的页面项目中读取文档上下文。所有的回应都认为是“问题”。但是,其他任何响应都没有解决REAL问题,“为什么要尝试在页面完成加载之前,即在页面完成加载之前完成值?”即使在页面加载完成后,即将完成阅读也没有价值。用户尚未更改值。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.