从脚本标签调用外部脚本中的函数时的 ReferenceError答案

【问题标题】：ReferenceError when calling function in external script from a script tag从脚本标签调用外部脚本中的函数时的 ReferenceError
【发布时间】：2017-08-31 00:01:50
【问题描述】：

我觉得我做错了什么，但我找不到。我不知道如何从脚本标签中调用外部定义的函数，它一直给我ReferenceError's。

我已将我的代码减少到最少，所以这就是我所拥有的。这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="mrbutton" type="button">Mr Button</button>
  <div id="barChart"></div>
  <script src="d3/d3.min.js"></script>
  <script src="d3/charts/bar.js"></script>
  <script>
    chartParams = {};
    document.getElementById('mrbutton').addEventListener('click', () => {createBarChart(chartParams)});
  </script>
</head>
</html>

d3/d3.min.js 是 D3 版本 3。这是我在 d3/charts/bar.js 中的内容：

'use strict';

const createBarChart = params => {
  console.log('hello there!');
};

console.log('script loaded!');

但是当我加载页面时，Javascript 控制台会吐出：

script loaded!
Uncaught ReferenceError: createBarChart is not defined

如果我将 d3/charts/bar.js 中的代码移动到 HTML 中的 <script> 标记中，它可以正常工作，但我想重用代码，所以我希望它是外部的。我究竟做错了什么？为什么我打不通createBarChart？

更新：使用 Babel 编译到 Ecmascript2015 并没有改变任何东西，仍然是相同的 ReferenceError。还将事件侦听器更改为箭头函数。

更新：我删除了 D3 代码，只是调用了一个 console.log()，但仍然没有运气。

【问题讨论】：

.addEventListener('click', createBarChart(chartParams)) 也是错误的。您正在调用该方法并将其返回的任何内容分配给单击事件，而不是在单击时调用该方法
你确定吗？我不认为.addEventListener() 是这样工作的。根据 MDN，第二个参数是“当指定类型的事件发生时接收通知的对象（实现 Event 接口的对象）。”
大声笑，是的，这就是它的工作原理。您需要将其定义为 .addEventListener('click', () => createBarChart(chartParams))
stackoverflow.com/questions/7102413/…
好吧，现在它是一个箭头函数。不过这不是我的问题。

标签： javascript html d3.js

【解决方案1】：

我让它工作了。不确定这是否对其他人有帮助（希望可以），但我刚刚重新启动了我的计算机。就这样;没有任何代码更改。我的原始代码现在可以正常工作（即使是原始的.addEventListener()）。

这不是浏览器缓存问题，因为我在私有模式下尝试了几个浏览器，但我仍然真的不知道问题是什么。如果有人知道它是什么，请发表评论，尽管能够继续前进，我仍然感到困惑。

【讨论】：

这样的事情是我有信任问题的原因。 :'( 很高兴你知道了！