Call js function defined in a babel script from HTML

Question

I am including my js file into my main html file like so

<script type="text/babel" src="js/scripts.js"></script>

Then I call one of my functions like so

<div class="allButton" id="completeAll" onclick="showAll('completeColumn');">Show All (...)</div>

the function looks like this

function showAll(column) {
  $('div[id^='+column+']').removeClass('hide');
};

When I click the button(div) I get this error Uncaught ReferenceError: showAll is not defined

I am using the text/babel as my script type because the file contains React JS stuff. I have no idea why I simply cannot call my function. I am extremely new to ReactJS and Babel. (note: I am not using npm/gulp due to limitations)

Any help and/or advice would be appreciated

Answer 1

If you just define your function as follows you will be able to call it within the HTML.

window.showAll = function showAll(column) {
    // your code here...
};

Answer 2

You have not exported your showAll function. When you transpile a JS/JSX file with Babel and bundle it to a scripts.js file (using Browserify or similar utilities), you must make sure to export your module (which tells your bundler to package it into your bundled file).

Your code should look like this:

var showAll = function(column) {
  $('div[id^='+column+']').removeClass('hide');
};

module.exports = showAll;

This tells your bundler that your showAll method needs to be exported and available to other referenced namespaces.