0

I feel like there is something very little I'm doing wrong, but I can't find it. I can't figure out how to call an externally-defined function from within a script tag, it keeps giving me ReferenceError's.

I've reduced my code to the most minimal, so here's what I've got. This is my 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 is D3 version 3. Here's what I have in d3/charts/bar.js:

'use strict';

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

console.log('script loaded!');

But when I load up the page, the Javascript console spits out:

script loaded!
Uncaught ReferenceError: createBarChart is not defined

If I move the code in d3/charts/bar.js into the <script> tag in the HTML, it works fine, but I want to reuse the code so I want it external. What am I doing wrong? Why can't I call createBarChart?

Update: Using Babel to compile down to Ecmascript2015 doesn't change anything, still the same ReferenceError. Also changed the event listener to an arrow function.

Update: I removed the D3 code and am just calling a console.log(), but still no luck.

thornjad
  • 155
  • 1
  • 13
  • `.addEventListener('click', createBarChart(chartParams))` is also wrong. You are calling the method and assigning whatever it returns to the click event, not calling the method on click – epascarello Aug 30 '17 at 15:08
  • Are you sure? I don't think that's how `.addEventListener()` works. The second argument according to MDN is "The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs." – thornjad Aug 30 '17 at 15:19
  • lol, yes that is HOW it works. You would need to define it as `.addEventListener('click', () => createBarChart(chartParams))` – epascarello Aug 30 '17 at 15:20
  • https://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load – epascarello Aug 30 '17 at 15:22
  • Alright sure, now it's an arrow function. That's not my problem though. – thornjad Aug 30 '17 at 15:27
  • but that is how your function was being called before you even clicked the button.... – epascarello Aug 30 '17 at 15:28
  • When you inspect the script, what do you see? – epascarello Aug 30 '17 at 15:28
  • Do you mean with dev tools? Under sources, I see my script as expected. I don't know how to do any inspecting other than that. – thornjad Aug 30 '17 at 15:43
  • Tested code and it works so unless your d3/charts/bar.js is actually different than what you posted, I have no clue. – epascarello Aug 30 '17 at 15:58

1 Answers1

0

I got it to work. Not sure if this will help anyone else (hopefully it can), but I just restarted my computer. That's all; no code changes whatsoever. My original code works fine now (even the original .addEventListener()).

It wasn't a browser caching issue, since I tried several browsers in private mode, and I still really don't know what the problem is. If anyone has any idea what it was, please do comment, I'm still puzzled despite being able to move on.

thornjad
  • 155
  • 1
  • 13