Cannot read property ‘value‘ of null

最新推荐文章于 2022-11-17 20:40:55 发布

B站大学酥糖

最新推荐文章于 2022-11-17 20:40:55 发布

阅读量8.8k

点赞数 2

文章标签： js getElementById

本文链接：https://blog.csdn.net/qq_45907053/article/details/116131321

版权

前端踩坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Cannot read property ‘value’ of null

无法读取null的属性“value”

运行的时候发现：

在这里插入图片描述

在这里插入图片描述

代码是这样子的：

<html>
  <head>
    <title>采用局部刷新 </title>
      <script type="text/javascript">

          function  doAjax(){

              //1、创建异步对象
              var  xmlHttp = new XMLHttpRequest();

              //2、绑定事件
              xmlHttp.onreadystatechange = function (){
                  //处理服务器端返回的数据，更新当前页面
                  alert("readyState属性值 = "+xmlHttp.readyState +" | status:"+xmlHttp.status)

                  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                      alert(xmlHttp.responseText);
                  }
              }



              //3、初始请求数据

              var w = document.getElementById("w").value;
              var h = document.getElementById("h").value;
              var name = document.getElementById("name").value;

              //bmiPrint?name = 李四&w=82&h=1.8
              var  param = "name="+name+"&w="+w+"&h="+h;
              alert("param = "+param);
              xmlHttp.open("get","bmiAjax?"+param,true);

              //4、发起请求
              xmlHttp.send();
          }
      </script>
  </head>

  <body>
         <p>采用局部刷新</p>
         <div>
              姓名：<input type="text" name="name"> <br/>
              体重（公斤）：<input type="text" name="w"> <br/>
              身高(米)：<input type="text" name="h"> <br/>
    <input type="button" value="计算bmi" onclick="doAjax()">
  </div>
  </body>
</html>

注意看，我在3、初始请求数据哪里写的是

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

getElementById 是 ById 是 id

要使用的是id，而我没有id，程序自然找不到就会报null

改成：也就是把name属性改为id属性

       <div>
              姓名：<input type="text" id="name"> <br/>
              体重（公斤）：<input type="text" id="w"> <br/>
              身高(米)：<input type="text" id="h"> <br/>
              <input type="button" value="计算bmi" onclick="doAjax()">
        </div>