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

我在这段代码中出错了，我尝试做一个事件，当页面加载时，它会做这个事件。但问题是当我转到另一个函数，但是在同一个页面上，这个变量会得到一个 null 的错误。当我执行这个代码时，它没有问题，但是当我在代码的其他部分时，就会发生这个错误。< br > < br >

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

$(document).ready(function(){
      

      

var str = document.getElementById("cal_preview").value;
var str1 = document.getElementById("year").value;
var str2 = document.getElementById("holiday").value;
var str3 = document.getElementById("cal_option").value;
   



if (str=="" && str1=="" && str2=="" && str3=="" )
{
document.getElementById("calendar_preview").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("calendar_preview").innerHTML=xmlhttp.responseText;
}
}
          

var url = calendar_preview_vars.plugin_url + "?id=" + str +"&"+"y="+str1+"&"+"h="+str2+"&"+"opt="+str3;
xmlhttp.open("GET",url,true);
xmlhttp.send();
    



});
736931 次浏览
小开
最佳答案

我不确定他们的 哪个是错误的，因为你没有提供你的 HTML，但其中之一不存在:

var str = document.getElementById("cal_preview").value;
var str1 = document.getElementById("year").value;
var str2 = document.getElementById("holiday").value;
var str3 = document.getElementById("cal_option").value;

没有具有 id 为 cal_preview、 year、 holiday、 cal_option的元素，也没有具有某种组合的元素。

因此，JavaScript 无法读取不存在的值。

编辑:

如果想首先检查元素是否存在，可以对每个元素使用 If 语句:

var str,
element = document.getElementById('cal_preview');
if (element != null) {
str = element.value;
}
else {
str = null;
}

显然，如果需要，可以更改 else 语句，或者根本没有 else 语句，但这完全取决于偏好。

小开

使用 ||更容易、更简洁:

  var str = ((document.getElementById("cal_preview")||{}).value)||"";
var str1 = ((document.getElementById("year")||{}).value)||"";
var str2 = ((document.getElementById("holiday")||{}).value)||"";
var str3 = ((document.getElementById("cal_option")||{}).value)||"";




if (str=="" && str1=="" && str2=="" && str3=="" )
{
document.getElementById("calendar_preview").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("calendar_preview").innerHTML=xmlhttp.responseText;
}
}


var url = calendar_preview_vars.plugin_url + "?id=" + str +"&"+"y="+str1+"&"+"h="+str2+"&"+"opt="+str3;
xmlhttp.open("GET",url,true);
xmlhttp.send();
小开

加一张支票

if (document.getElementById('cal_preview') != null) {
str = document.getElementById("cal_preview").value;
}
小开

我的错误是将 Javascript 文件(标记)保留在 html 声明之上。

它的工作方式是将 js script 标记放在 body 内部的底部。(我没有加载页面上的脚本。)

小开

将 MainContent_添加到 ID 值。

例如:

这将产生一个错误

document.getElementById("Password").value = text;

这样就可以了:

document.getElementById("**MainContent_**Password").value = text;
小开

可以添加 TimeOut 来验证对象，而不是使用 document 或 $(document)来避免 JQuery。在加载页中的所有对象和其他事件之后执行 TimeOut..。

setTimeout(function () {


var str = document.getElementById("cal_preview").value;
var str1 = document.getElementById("year").value;
....
....
....


}, 0);
小开

HTML: 通过点击整个身体内部

div class="calculate" id="calculate">
<div class="button" id="button" onclick="myCode(this.body)"> CALCULATE ! </div>
</div>

然后在函数“ myCode ()”中编写 JavaScript 代码

function myCode()
{
var bill = document.getElementById("currency").value ;


var people_count = document.getElementById("number1").value;
var select_value = document.getElementById("select").value;


var calculate = document.getElementById("calculate");


calculate.addEventListener("click" ,function()
{
console.log(bill);
console.log(people_count);
console.log(select_value);
});
}

你会得到你的价值观 我正在使用可视化工作室代码编辑器

小开

如果在你的 超文本标示语言中有一个带有 姓名或者 身份证的输入元素带有 我不知道，比如 First _ name或者多个 我不知道，比如 Student _ first _ name，并且你的网页底部也有 Javascript 代码，而且你确定你做的其他事情都是正确的，那么这些破折号可能就是你搞砸的原因。

对于类似于下面的输入元素，使用 身份证或 姓名

<input type="text" id="first_name" name="first_name">

或者

<input type="text" id="student_first_name" name="student_first_name">

然后，您尝试在您的 JavaScript代码中像下面这样调用

var first_name = document.getElementById("first_name").value;

或者

var student_first_name = document.getElementById("student_first_name").value;

在 谷歌浏览器和 Internet Explorer上肯定会出现类似 未捕获的 TypeError: 无法读取 null 属性“ value” 的错误。我没有用 Firefox 测试过。

在我的情况下，我删除破折号，在 First _ name和重命名为 名字和从 Student _ first _ name到 学生名字

最后，我能够解决这个错误，我的代码现在看起来如下 HTML 和 JavaScript。

超文本标示语言

<input type="text" id="firstname" name="firstname">

或者

<input type="text" id="studentfirstname" name="studentfirstname">

Javascript

var firstname = document.getElementById("firstname").value;

或者

var studentfirstname = document.getElementById("studentfirstname").value;

因此，如果您可以用这些破折号重命名 超文本标示语言和 JavaScript代码，那么如果正是这些破折号导致您的代码出现问题，那么它可能会有所帮助。对我来说，这就是困扰我的问题。

小开

通过尝试抓住把手

    try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
小开

检查 script 标签-它应该在 body 内容的下面，body 标签的上面

  <script src="script.js"></script>
</body>


</html>


提交答案