JavaScript新手，想问一下这个玄学document.getElementById

代码很简单

scritp部分是这样：

<script>
            var a =Math.random()*(4-1)+1;
            document.getElementById("number").innerText = Math.floor(a);
</script>

body 部分是这样：

<body>
        <div>
            <span id="number"></span>
        </div>
    </body>

可结果老是这样：

我实在理解不了为什么

和代码的加载顺序有关，放在头部获取的值是null，需要将script标签放在body里面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>Document</title>
  </head>
  <body>
    <div><span id="number">123</span></div>
    <script>
      document.getElementById('number').innerHTML = '新的内容';
    </script>
  </body>
</html>

 

代码加载顺序问题https://blog.csdn.net/qq_42475949/article/details/110672037

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y

代码的运行是从上到下的，你在HTML代码的上面使用script标签写入JS代码他是找不到那个ID number的，这也是script标签如果不存在初始化时基本都是在页面标签body下面导入的原因