Cannot read properties of null (reading 'addEventListener'

头像
奇天大郑
     上海
    阅读 11 分钟

    html代码:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission</title>
    <link href="sytles.css" rel="stylesheet">
    <script src="script.js"></script>
    
</head>
<body>
    <form id="userForm" >
        <div>
            <label for="name" >姓名:</label>
            <input type="text" id="name" name="name" maxlength="30" value="user" placeholder="请输入姓名" required>
        </div>
        <div class="topMargin">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" value="pass.123" placeholder="请输入密码" required>
        </div>
       <div class="topMargin">
            <!-- 性别选择 -->
            <span>你的性别:</span>
            <label for="male">男</label>
            <input type="radio" id="male" name="gender" value="male" checked required>
            <label for="female">女</label>
            <input type="radio" id="female" name="gender" value="female" required>
       </div>

       <div class="topMargin">
            <span>你的科室:</span>
            <input type="radio" id="soft1" name="soft" value="soft1" checked required>
            <label for="soft1">软一</label>
            <input type="radio" id="soft2" name="soft" value="soft2" required>
            <label for="soft2">软二</label>
            <input type="radio" id="soft3" name="soft" value="soft3" required>
            <label for="soft3">软三</label>
            <input type="radio" id="soft4" name="soft" value="soft4" required>
            <label for="soft4">软四</label>
            <input type="radio" id="soft5" name="soft" value="soft5" required>
            <label for="soft5">软五</label>
       </div>
    
       <div class="topMargin">
            <!-- 使用过的app选择 -->
            <span>使用过的工行app:  </span>
            <input type="checkbox" id="app1" name="apps" value="app1" checked>
            <label for="app1">手机银行</label>
            <input type="checkbox" id="app2" name="apps" value="app1">
            <label for="app2">e生活</label>
            <input type="checkbox" id="app3" name="apps" value="app2">
            <label for="app3">融易联</label>
            <input type="checkbox" id="app4" name="apps" value="app3">
            <label for="app4">e办公</label>
           
            <!-- 可以继续添加更多app -->
       </div>

       <div class="topMargin">
            <!-- 日期选择 -->
            <label for="date">日期:</label>
            <input type="date" id="date" name="date" value="2024-03-01" required>

       </div>

        <!-- Add other form fields here -->
        <div class="topMargin">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" value="123@qq.com" required>
        </div>
        <div class="topMargin">
                        <!-- 城市选择 -->
            <label for="city">城市:</label>
            <select id="city" name="city" required>
                <option value="">请选择城市</option>
                <option value="beijing" selected>北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
                <!-- 可以继续添加更多城市 -->
            </select>
        </div>

        <div class="topMargin">
            <label for="introduction">介绍你自己:</label>
            
            <div class="topMargin">
                <textarea id="introduction" name="introduction"  required>测试内容</textarea>
            </div>
            <div class="subResetButton">
                <button type="submit">Submit</button>
                <input type="reset" value="重置">
            </div>
        </div>

    </form>
</body>
</html>

    js代码:

    function formDataToJson(formData) {
  let obj = {};
  for (let key of formData.keys()) {
    obj[key] = formData.get(key);
  }
  return JSON.stringify(obj);
}



Object.defineProperty(HTMLFormElement.prototype, 'jsondata', {
  get() {
      const jsondata = {}
      const formdata = new FormData(this);
      formdata.forEach((value, key) => {
          if (!jsondata[key]) {
              jsondata[key] = formdata.getAll(key).length > 1 ? formdata.getAll(key) : formdata.get(key);
          }
      });
      return jsondata;
  }
})

Object.defineProperty(HTMLFormElement.prototype, 'formdata', {
  get() {
      return new FormData(this);
  }
})


document.getElementById('userForm').addEventListener('submit', function(event){
  event.preventDefault(); // 阻止表单默认提交行为

  const formData = new FormData(this);
  const entries = Object.fromEntries(formData.entries());
  console.log("2312");
  let jsonData = formDataToJson(formData);
  console.log(jsonData)
  //console.log(entries); // 打印表单数据到控制台 
  
});

    使用浏览器渲染后控制台报错:
    image.png

    script.js:31 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:31:36

    原因:脚本<script>>在head中，在body还没加载完之前，脚本先加载了，所以找不到监听对象

    解决方法: 将脚本放在<body>里或者<body>后

    修改后的html代码:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission</title>
    <link href="sytles.css" rel="stylesheet">
    
</head>
<body>
    <form id="userForm" >
        <div>
            <label for="name" >姓名:</label>
            <input type="text" id="name" name="name" maxlength="30" value="user" placeholder="请输入姓名" required>
        </div>
        <div class="topMargin">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" value="pass.123" placeholder="请输入密码" required>
        </div>
       <div class="topMargin">
            <!-- 性别选择 -->
            <span>你的性别:</span>
            <label for="male">男</label>
            <input type="radio" id="male" name="gender" value="male" checked required>
            <label for="female">女</label>
            <input type="radio" id="female" name="gender" value="female" required>
       </div>

       <div class="topMargin">
            <span>你的科室:</span>
            <input type="radio" id="soft1" name="soft" value="soft1" checked required>
            <label for="soft1">软一</label>
            <input type="radio" id="soft2" name="soft" value="soft2" required>
            <label for="soft2">软二</label>
            <input type="radio" id="soft3" name="soft" value="soft3" required>
            <label for="soft3">软三</label>
            <input type="radio" id="soft4" name="soft" value="soft4" required>
            <label for="soft4">软四</label>
            <input type="radio" id="soft5" name="soft" value="soft5" required>
            <label for="soft5">软五</label>
       </div>
    
       <div class="topMargin">
            <!-- 使用过的app选择 -->
            <span>使用过的工行app:  </span>
            <input type="checkbox" id="app1" name="apps" value="app1" checked>
            <label for="app1">手机银行</label>
            <input type="checkbox" id="app2" name="apps" value="app1">
            <label for="app2">e生活</label>
            <input type="checkbox" id="app3" name="apps" value="app2">
            <label for="app3">融易联</label>
            <input type="checkbox" id="app4" name="apps" value="app3">
            <label for="app4">e办公</label>
           
            <!-- 可以继续添加更多app -->
       </div>

       <div class="topMargin">
            <!-- 日期选择 -->
            <label for="date">日期:</label>
            <input type="date" id="date" name="date" value="2024-03-01" required>

       </div>

        <!-- Add other form fields here -->
        <div class="topMargin">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" value="123@qq.com" required>
        </div>
        <div class="topMargin">
                        <!-- 城市选择 -->
            <label for="city">城市:</label>
            <select id="city" name="city" required>
                <option value="">请选择城市</option>
                <option value="beijing" selected>北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
                <!-- 可以继续添加更多城市 -->
            </select>
        </div>

        <div class="topMargin">
            <label for="introduction">介绍你自己:</label>
            
            <div class="topMargin">
                <textarea id="introduction" name="introduction"  required>测试内容</textarea>
            </div>
            <div class="subResetButton">
                <button type="submit">Submit</button>
                <input type="reset" value="重置">
            </div>
        </div>

    </form>
</body>
<!-- 把script放在body之后再加载 -->
<script src="script.js"></script>
</html>
    javascripthtml5css
    奇天大郑
    70 声望10 粉丝
    « 上一篇
    idea2023.1版本Services中SpringBoot项目没有Program arguments选项
    下一篇 »
    函数方法常用的动词表

    引用和评论

    推荐阅读
    头像
    Springboot多线程机制的相关思考

    奇天大郑阅读 189

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    0 条评论
    得票最新