[已解决]html问题

歌者文明清理员 · 发表于 2023-6-1 14:26:01

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小甲鱼Web开发教程概览</title>
</head>
<body>
<script type="text/javascript" defer>
var urlParams = new URLSearchParams(window.location.search);
var cid = urlParams.get('cid');
document.getElementById('main').innerHTML = "<h1>" + cid + "</h1>";
</script>
<div id="main">
</div>
</body>
</html>

复制代码

截图：

最佳答案

月排行榜 / 总排行榜

isdkz

2023-6-1 15:25:14

你的JavaScript代码试图在页面加载时修改 div 元素的 innerHTML ，但是在你的 script 元素中，你并未等待你的HTML元素被完全加载。当JavaScript试图通过 document.getElementById('main') 获取元素时，这个元素可能还没有被浏览器加载完全，所以返回的是 null 。在你试图更改这个 null 的 innerHTML 时，将会出现错误。

你可以把这段JavaScript代码放在 body 的末尾，或者把它放在一个会在所有HTML元素都加载完毕后执行的函数里，比如 window.onload 或 DOMContentLoaded 事件的监听器中。这样可以确保在执行这段JavaScript代码时HTML元素已经被完全加载了。

以下是一个修正后的代码示例：

<!DOCTYPE html>

<html>

<head>

      <meta charset="utf-8">

      <title>小甲鱼Web开发教程概览</title>

</head>

<body>

      <div id="main"> 

      </div>

      <script type="text/javascript">

         window.onload = function() {

            var urlParams = new URLSearchParams(window.location.search);

            var cid = urlParams.get('cid');

            document.getElementById('main').innerHTML = "<h1>" + cid + "</h1>";

         }

      </script>

</body>

</html>

复制代码

在这个修改后的版本中，JavaScript代码被封装在一个会在页面加载完毕后才执行的函数中。

跳转到最佳答案楼层

isdkz · 发表于 2023-6-1 15:25:14

你的JavaScript代码试图在页面加载时修改 div 元素的 innerHTML ，但是在你的 script 元素中，你并未等待你的HTML元素被完全加载。当JavaScript试图通过 document.getElementById('main') 获取元素时，这个元素可能还没有被浏览器加载完全，所以返回的是 null 。在你试图更改这个 null 的 innerHTML 时，将会出现错误。

你可以把这段JavaScript代码放在 body 的末尾，或者把它放在一个会在所有HTML元素都加载完毕后执行的函数里，比如 window.onload 或 DOMContentLoaded 事件的监听器中。这样可以确保在执行这段JavaScript代码时HTML元素已经被完全加载了。

以下是一个修正后的代码示例：

<!DOCTYPE html>

<html>

<head>

      <meta charset="utf-8">

      <title>小甲鱼Web开发教程概览</title>

</head>

<body>

      <div id="main"> 

      </div>

      <script type="text/javascript">

         window.onload = function() {

            var urlParams = new URLSearchParams(window.location.search);

            var cid = urlParams.get('cid');

            document.getElementById('main').innerHTML = "<h1>" + cid + "</h1>";

         }

      </script>

</body>

</html>

复制代码

在这个修改后的版本中，JavaScript代码被封装在一个会在页面加载完毕后才执行的函数中。

歌者文明清理员 · 发表于 2023-6-1 15:26:58

isdkz 发表于 2023-6-1 15:25
你的JavaScript代码试图在页面加载时修改 div 元素的 innerHTML ，但是在你的 script 元素中，你并未等待你 ...

睡醒了？

isdkz · 发表于 2023-6-1 15:28:07

歌者文明清理员发表于 2023-6-1 15:26
睡醒了？

本来想睡个半小时起床吃午餐，结果忘记调闹钟就睡到现在了

歌者文明清理员 · 发表于 2023-6-1 15:32:43

isdkz 发表于 2023-6-1 15:28
本来想睡个半小时起床吃午餐，结果忘记调闹钟就睡到现在了

嘿嘿~sfqxx不在最佳都是我的！

sfqxx · 发表于 2023-6-1 16:15:33

歌者文明清理员发表于 2023-6-1 15:32
嘿嘿~sfqxx不在最佳都是我的！

你看嘛，让你几天，到时候再发威

上个月超过你70

歌者文明清理员 · 发表于 2023-6-1 16:16:00

sfqxx 发表于 2023-6-1 16:15
你看嘛，让你几天，到时候再发威

上个月超过你70

切，昨天晚上我蹲点追回来4个

sfqxx · 发表于 2023-6-1 16:16:28

歌者文明清理员发表于 2023-6-1 16:16
切，昨天晚上我蹲点追回来4个

当夜猫子可不是个好习惯哦~

歌者文明清理员 · 发表于 2023-6-1 16:17:12

sfqxx 发表于 2023-6-1 16:16
当夜猫子可不是个好习惯哦~

甲鱼也是夜猫子

sfqxx · 发表于 2023-6-1 16:18:52

歌者文明清理员发表于 2023-6-1 16:17

~~甲鱼也是夜猫子~~

人家是学生党吗？

歌者文明清理员 · 发表于 2023-6-1 16:23:44

sfqxx 发表于 2023-6-1 16:18
人家是学生党吗？

又没事

sfqxx · 发表于 2023-6-1 16:24:02

歌者文明清理员发表于 2023-6-1 16:23
又没事

所以你的成绩……

歌者文明清理员 · 发表于 2023-6-1 16:30:01

sfqxx 发表于 2023-6-1 16:24
所以你的成绩……

？我又不会上课睡觉

陈尚涵 · 发表于 2023-6-1 17:47:13

前端是我最拿手的，js基本精通（划掉），vue也会用
这个东西的话是从上往下执行的，你script再前，div定义在后面，肯定访问不到
解决方法：
1.在js代码的最外面套一个onload:window.onnload=()=>{代码}
2.在div后插入代码

账号		自动登录	找回密码
密码			立即注册

[已解决]html问题

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块