Question

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

未捕获的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(); 


 });

Answer 1

我不确定哪些错误，因为您没有提供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语句，但这完全取决于首选项。

Answer 2

使用||更简单，更简洁...

$(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(); 


});

Answer 3

添加支票

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

Answer 4

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

它的工作原理是将js脚本标记放在正文体内的底部。（我没有加载页面的脚本。）

Answer 5

添加＆＃34; 主要内容_ ＆＃34;到ID值！

实施例：（错误）

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

（OK！）

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

Answer 6

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

setTimeout(function () { 

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

}, 0);

Answer 7

HTML：单击时将整个身体传递给

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

然后将JavaScript代码写入函数“ myCode（）”中

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);
    });
}

您将获得自己的价值观我正在使用Visual Studio代码编辑器

Answer 8

如果在您的 HTML 中，您有一个带有名称或 id 且带有 _ 的输入元素，例如名字或多个 _ ，例如 student_first_name ，并且您的网页底部也有Javascript代码，并且您确定自己所做的其他所有操作都正确，那么这些破折号可能会使您感到困惑。

具有类似于以下内容的输入元素 id 或名称

<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;

您肯定会出现类似 Uncaught TypeError：无法读取 Google Chrome 和< strong> Internet Explorer 。我没有用Firefox进行测试。

就我而言，我删除了名字中的破折号，并将其重命名为名字，并从 student_first_name 重命名为 studentfirstname

最后，我现在可以使用我的代码来解决该错误，对于HTML和JavaScript如下所示。

HTML

<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;

因此，如果可以的话，可以用这些破折号重命名 HTML 和 JavaScript 代码，这可能会使您的代码陷入困境。就我而言，这就是困扰我的原因。

希望这可以帮助某人像我一样停止拔头发。

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

8 个答案: