加载了外部 js 文件但代码不起作用

编程问答 2022-04-21

问题描述

当我在 html 文件内部编写 js 代码时，它运行良好。 这是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="./cs.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
   <div id="root" onload="App">
   

</div>
<script src="js/App.js" type="module" />
</body>
</html>

这里是 App.js 文件

import Insert from './Insert.js';
function App(){
  document.getElementById("root").insertAdjacentHTML("afterbegin",'<h1>hello Javascript</h1>');
};

解决方法

  1. onload 不是 div 元素支持的属性，通常如果你使用它，你会将它应用到 body 元素，但应该避免使用 {{1} }}
  2. addEventListener 属性的值是 JS 函数的主体。仅提及另一个函数的名称并没有任何作用。如果你想调用一个函数，你通常会在名称后面加上 onload。
  3. () 加载一个 JS 模块，这（除其他外）意味着外部作用域是 module 而不是全局作用域，因此您无论如何都无法访问 type="module" .再次使用 App。
  4. addEventListener 元素的 </script> 结束标记是必需的，您将其省略。 （因为这是文档中的最后一件事，所以它可能不会破坏任何内容，但您正在为未来的问题敞开心扉。
external-jsjavascriptmodulemodule