html 为什么脚本不更新元素的内容?[duplicate]

ftf50wuq  于 2023-01-28  发布在  其他
关注(0)|答案(2)|浏览(119)
    • 此问题在此处已有答案**:

Why does jQuery or a DOM method such as getElementById not find the element?(6个答案)
3天前关闭。
我以前在其他环境中也这样做过,效果很好,所以我怀疑这是环境问题。www.example.comhttps://replit.com/@MargaretGuzman/Demo#script.js
我期望脚本将元素的内容更新为"hi"。

const box = document.getElementById("demo");
box.innerText = "hi";
html, body {
  height: 100%;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="demo">before</div>
</body>

</html>
stszievb

stszievb1#

作为HTML中<body>元素的最后一个子元素,您需要一个<script>元素来连接JavaScript文件,以便在页面加载时执行。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="demo"></div>
  <script src="script.js"></script>
</body>

</html>

我派生了你的Replit,我修改的代码可以工作,然而,你也可以把你的JS连接到HTML,而不必完全按照我的方式去做。
其他人注意到您的代码实际上可以在Stackoverflow环境中工作,我也证实了这一点,但通常情况下,使用传统的HTML/JS设置时,您需要手动将JS连接到HTML。

vfwfrxfs

vfwfrxfs2#

你应该导入javascript文件到html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="demo"></div>
  =>>> <script src="./script.js"></script> <<<=
</body>

</html>

相关问题