我的項目有HTML，CSS和javaScript代碼，在HTML中

& ltbutton class = & quot容器按鈕& quotid = & quotbtn & quotonclick = & quottoggle container()& quot；& gt& lt/button & gt；

我的index.js文件看起來像

import './src/css/main.css';

function toggleContainer() {
    show/container or hide
  
}

在我的index.html文件中，我附加了如下javascript文件

<script src="/index.js"></script>

在瀏覽器控制臺中，錯誤是

[Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)]

當我點擊按鈕時，我得到

Uncaught ReferenceError: toggleContainer is not defined
    at HTMLButtonElement.onclick

即使在OING之后，這種錯誤依然存在。鍵入& quot:& quot模塊& quot,

問題是您試圖全局訪問toggleContainer()。因為它是一個模塊JS文件，導出的變量不會自動被全局聲明。

您需要將toggleContainer附加到全局對象(即窗口):

// index.js
function toggleContainer() {
    ...
}

window.toggleContainer = toggleContainer

此外，如果沒有帶有可處理css文件的加載程序的捆綁器(如webpack、rollup、package等),則無法在JS模塊文件中直接導入. CSS文件。您將需要使用一個鏈接HTML標簽來導入CSS文件。

<link rel="stylesheet" href="./src/css/main.css">