javascript - 将外部 JS 文件包含到 HTML 中的问题

标签 javascript html

我已经阅读了很多教程并进行了尝试,但它们不起作用。 举个例子,我写了这个简单的代码:

<!DOCTYPE html>
<html>
  <head>

  </head>
<body>
    <p id="testElement"> Html text</p>

<script>
     var paragraph = document.getElementById("testElement");
     paragraph.innerHTML = "Test Message";
</script>

</body>
</html>

我的页面中出现了 Test Message 文本。

然后我将我的 JS 代码放到一个外部文件中:'/js/js.js'

var paragraph = document.getElementById("testElement");

paragraph.innerHTML = "Test Message";

并将 HTML 文件修改为:

<!DOCTYPE html>
<html>
  <head>
        <script type="text/javascript" src="/js/js.js"></script>
  </head>
<body>

    <p id="testElement"> Html text</p>

</body>
</html>

当我在浏览器中打开 HTML 文件时,我只得到 Html 文本。我的 JS 不工作。请解释我做错了什么。

最佳答案

你的问题是 head 中链接的 javascript 在 body 加载之前执行,所以你可以像这样将脚本放在 body 的末尾:

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <p id="testElement"> Html text</p>
        <script type="text/javascript" src="js/js.js"></script>
    </body>
</html>

关于javascript - 将外部 JS 文件包含到 HTML 中的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33807169/

相关文章:

jquery - IE8网站问题

html - 使用内联 CSS 动画制作 HTML 横幅广告

javascript - Foundation 5 slider 显示两位小数

javascript - 为什么我的时钟添加时间功能不起作用?

javascript - 如何在spine.js中重新绑定(bind) Controller ?

javascript - React/Redux 状态在第二次操作调用时为空

html - 如何在 IE 中使用 css 隐藏选择选项?

java - Htmlunit ScriptException "console"未定义

html - 帮助使用 CSS 选择器(jQuery 日期选择器)

HTML/CSS 对齐(内联、水平)和保持右对齐