document.addEventListener('DOMContentLoaded', function() { // 获取按钮和输入框的元素 const generateBtn = document.getElementById('10'); const phoneInput = document.getElementById('7'); const verifyInput = document.getElementById('8'); const submitBtn = document.getElementById('submit-btn'); let randomNum = null; // 存储随机数的变量 // 生成随机数并弹窗显示 generateBtn.addEventListener('click', function(event) { event.preventDefault(); // 如果手机号不满足要求，则弹出手机号错误的提示框 if (!validatePhone()) { alert('手机号错误'); return; } // 如果随机数还未生成，则生成新的随机数 if (randomNum === null) { randomNum = Math.floor(Math.random() * 10000); } // 弹窗显示随机数 alert('验证码：' + randomNum); }); // 提交按钮点击事件监听器 submitBtn.addEventListener('click', function(event) { // 获取存储的随机数 const storedRandomNum = randomNum; // 获取用户输入的验证码和手机号 const userEnteredNum = parseInt(verifyInput.value); const phoneValue = phoneInput.value; // 检查是否已生成随机数 if (storedRandomNum === null) { event.preventDefault(); } else if (userEnteredNum !== storedRandomNum) { // 检查验证码是否正确 event.preventDefault(); alert('验证码错误'); } else { // 验证码正确，提交表单 // 这里可以添加其他逻辑或调用其他函数来处理表单提交 } }); // 手机号验证函数 function validatePhone() { const phoneValue = phoneInput.value; // 检查手机号是否为11个数字 return /^\d{11}$/.test(phoneValue); } }); 为什么刚进入界面时会弹出”手机号错误“的弹窗

刚进入界面时会弹出"手机号错误"的弹窗，是因为在点击生成随机数按钮之前，会先调用手机号验证函数 validatePhone() 来检查手机号是否满足要求。

如果手机号不满足要求，即不是11个数字，那么就会触发 alert('手机号错误')，弹出"手机号错误"的提示框。

这样做是为了确保用户输入的手机号是有效的，只有在手机号满足要求时才能生成随机数。

相关问题

document.addEventListener('DOMContentLoaded', function() { //获取按钮和输入框的元素 const generateBtn = document.getElementById('10'); const phoneInput = document.getElementById('7'); const verifyInput = document.getElementById('8'); const submitBtn = document.getElementById('submit-btn'); let randomNum = null; //存储随机数的变量 //生成随机数并弹窗显示 generateBtn.addEventListener('click', function(event) { event.preventDefault(); //如果手机号不满足要求，则弹出手机号错误的提示框 if (!validatePhone()) { alert('手机号错误'); return; } //如果随机数还未生成，则生成新的随机数 if (randomNum === null) { randomNum = Math.floor(Math.random() * 10000); } //弹窗显示随机数 alert('验证码：' + randomNum); }); //提交按钮点击事件监听器 submitBtn.addEventListener('click', function(event) { //获取存储的随机数 const storedRandomNum = randomNum; //获取用户输入的验证码和手机号 const userEnteredNum = parseInt(verifyInput.value); const phoneValue = phoneInput.value; //检查是否已生成随机数 if (storedRandomNum === null) { event.preventDefault(); } else if (userEnteredNum !== storedRandomNum) { //检查验证码是否正确 event.preventDefault(); alert('验证码错误'); } else { //验证码正确，提交表单 //这里可以添加其他逻辑或调用其他函数来处理表单提交 } }); //手机号验证函数 function validatePhone() { const phoneValue = phoneInput.value; //检查手机号是否为11个数字 return /^\d{11}$/.test(phoneValue); } });

刚进入界面时不应该弹出"手机号错误"的弹窗，因为此时用户还没有进行任何操作。可能的原因是在页面加载完成后，自动触发了生成随机数按钮的点击事件。

请检查页面加载完成后是否存在其他代码或事件触发了生成随机数按钮的点击事件。可以通过在生成随机数按钮的点击事件处理函数中添加 console.log() 或者 alert() 来进行调试，查看是否在页面加载完成时就执行了生成随机数按钮的点击事件。

另外，也要确保生成随机数按钮的相关元素（如id为 '10'）存在于页面中，并且与对应的按钮元素匹配。

const closeBtn = document.getElementById("closeVideoBtn"); // 加载视频 function loadVideo() { const videoSource = "../assets/videos/1、乡镇（街道）平安指数.mp4"; videoElement.src = videoSource; console.log(1); } // 关闭视频 function closeVideo() { videoElement.pause(); document.getElementById("video-container").hidden = true; } // 监听关闭按钮点击事件 closeBtn.addEventListener("click", closeVideo); Cannot read properties of null (reading 'addEventListener')

当报错 `Cannot read properties of null (reading 'addEventListener')` 出现时，通常是因为 `document.getElementById("closeVideoBtn")` 没有找到对应的元素，返回了 `null`。这可能是由于以下原因导致的：

1. HTML 中没有具有 `id="closeVideoBtn"` 的元素。
2. JavaScript 代码在 HTML 元素加载之前执行，导致无法找到元素。

请确保以下几点：

1. 确认 HTML 中存在具有 `id="closeVideoBtn"` 的元素，并且该元素在 JavaScript 代码执行时已经被加载到 DOM 中。

   <button id="closeVideoBtn">关闭视频</button>

2. 将 JavaScript 代码放置在 HTML 元素之后，或者确保代码在页面加载完成后执行。可以将代码放在以下位置：
- 将 `<script>` 标签放置在 HTML 元素之后。
- 将代码放置在 `DOMContentLoaded` 事件监听器内部，以确保代码在页面加载完成后执行。

   document.addEventListener("DOMContentLoaded", function() {
       // 在此处放置 JavaScript 代码
   });

请检查上述两个方面是否满足，以确保正确获取到 `closeBtn` 元素，并添加事件监听器。