ReferenceError onclick JavaScript

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模块加载，而不是在全局范围中加载。如果希望stockClicked()是全局可用的，只需从脚本标记中删除type="module"即可。

如果您确实需要使用type="module"，那么您有几个选项：

1. 创建一个新的内联模块脚本标记，该脚本从script.js导入，并通过声明window.stockClicked = stockClicked显式地将stockClicked()函数分配到全局范围。
2. 以编程方式而不是在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>

​