Question

我看过多篇有关此问题的文章，直到现在我还没有经历过。

我有一个ID为“ fname”的输入字段，想通过id获取元素并将其值存储在变量中。

但是，我一直收到标题中提到的错误。

JavaScript

<script>
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
</script>

HTML

<p>Enter the first string:<input type = "name" id="fname">
<p>Enter the second:<input type = "name" id="lname"></p>

有人能够获取该错误吗？我已经过去20分钟了。

Answer 1

我们应该始终在DOM元素之后加载脚本。在这种情况下，您应该将脚本移到底部以使其起作用。始终首选在正文结束标签</body/>

之前加载脚本的方法

<p>Enter the first string:<input type = "name" id="fname">
<p>Enter the second:<input type = "name" id="lname"></p>

<script>
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
</script>

实时运行示例-https://jsitor.com/Rg0jU9HFN

Answer 2

您需要在文档完全呈现后执行Javascript代码。 Javascript具有内置功能，无需在按钮上触发它。

<p>Enter the first string:<input type = "name" id="fname">
<p>Enter the second:<input type = "name" id="lname"></p>

<script>
//first define the variables so they are available in the global scope
var fname, lname;

//once the document has fully loaded, call the function 
//passed as second argument to the addEventListener method
document.addEventListener('DOMContentLoaded', function(){ 
   fname = document.getElementById("fname").value;
   lname = document.getElementById("lname").value;
});
</script>

请注意，它不支持较旧的Internet Explorer版本，因为它们不支持DOMContentLoaded事件。

错误-无法读取null的属性“值”

2 个答案: