Question

当用户单击段落时，我试图从script.js运行一个函数，但是它给了我ReferenceError: stockClicked is not defined。

我的HTML是：

<p id="stock" onclick="stockClicked()"></p>
<script type="module" src="script.js"></script>

stockClicked()函数在script.js中定义：

function stockClicked() {
  console.log("here");
}

Answer 1

当您使用type="module"引用脚本时，该脚本将作为ES6 module加载，而不是在全局范围内加载。如果您希望stockClicked()在全球范围内可用，只需从脚本标签中删除type="module"。

如果您确实需要使用type="module"，则有两种选择：

创建一个新的内联模块脚本标签，该标签从script.js导入，并说出stockClicked()，将window.stockClicked = stockClicked函数显式分配给全局范围。
以编程方式而非HTML形式添加点击侦听器。换句话说，在p标记之后，添加一个内联脚本，该脚本通过id获取元素并添加一个点击侦听器。像这样：

import {stockClicked} from './script.js';

document.getElementById("stock").addEventListener("click", stockClicked);

在两种情况下，都需要从stockClicked()导出script.js函数。另外，建议使用.mjs而不是.js来命名模块文件。

Answer 2

如果您需要type="module"，则必须将click事件绑定到脚本本身中

function stockClicked() {
  console.log('here');
}

document.getElementById('stock').addEventListener('click', stockClicked);

<p id="stock">click here</p>