我正在用stencil.js构建我的第一个Web应用程序，直到现在我的JavaScript代码都在index.html文件中，但现在我想将代码移动到一个单独的文件（script.js）中。
下面是我的index.html文件：
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Booker App</title>
<meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta name="theme-color" content="#16161d">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="manifest" href="/manifest.json">
<script src="./script.js"></script>
</head>
<body>
<booker-header></booker-header>
<booker-display></booker-display>
<booker-buttons name="Add Books"></booker-buttons>
<booker-form></booker-form>
<!-- <script>
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function() {
form.open();
})
</script> -->
</body>
</html>下面是我的script.js文件：
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});我尝试在</body>之前放置脚本标记，但没有帮助
1条答案
按热度按时间wwtsj6pe1#
原始答案，仍然相关
通过将脚本移动到外部文件中，它现在可以在加载页面的其余部分之前执行，因为script标记位于原始HTML页面中注解脚本的上方。
尝试将整个脚本 Package 在
DOMContentLoaded事件中，以强制它等待所有页面加载完毕。404错误提示
script.js的
src属性以./开头，而不是像头文件中加载的其他资源那样以/开头。从技术上讲，这是一个相对引用，只要script.js在目录树中紧挨着HTML文件就可以。检查你的目录树，确保你有这样的东西，并确保你有script.js在根目录位置，它看起来就在mainfest.json旁边。