从脚本标签中呼叫外部脚本中的Reference Error

我觉得我做错了什么，但找不到。我不知道如何从脚本标签中调用外部定义的函数，它不断给我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。还将事件侦听器更改为箭头函数。

update：我删除了D3代码，只是调用Console.log（），但仍然没有运气。

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

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

相关内容

最新更新

热门标签：