Browserify, how to access main.js functions

Question

I can get browserify working but am a little confused about how to access the functions in bundle.js from the DOM.

I have three files-

message.js

module.exports = function (){
   return "Hello";
};

main.js

var getMessage = require('./message');

//This shows the alert when script loads
alert(getMessage());

//cannot find this function from index.html
function fnClick(){
    alert(getMessage());
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/bundle.js"></script>
</head>
<body>
    <button onclick="fnClick();">Click</button>
</body>
</html>

In the browser when the script loads alert(getMessage()); in main.js shows the alert but debugger, fnClick is undefined and I can work the scope.

Thanks

Don't write inline JavaScript. Require your modules in an external file, then Browserify the whole thing, and just include the `bundle.js` file. — elclanrs, Aug 27 '14 at 00:38
I understand what you are saying, but in the example above, that would mean that I have to programmatically add event handler onto the button. Is what you suggest the only way? — Dave Pile, Aug 27 '14 at 00:43

score 24 · Accepted Answer · edited Aug 06 '20 at 18:25

24

Any code in entry file is executed in the closure. If you look at the created bundle.js, you will see something like this in there.

function(require, module, exports) {
    function fnClick() {
        alert(getMessage());
    }
}

Anything you create in here will be just hidden to global space unless you explicitly use window object (but don't do that) to expose it.

As @elclanrs said in comments above, just attach the event listener in your main.js code instead of HTML. If you don't want to use external libraries, you can do it hard way.

var button = document.getElementById('my-button'); // add id="my-button" into html
button.addEventListener('click', fnClick);

Or with library like popular jQuery you would just call.

$('#my-button').click(fnClick)

edited Aug 06 '20 at 18:25

rsc

10,348
5
39
36

answered Aug 27 '14 at 08:03

FredyC

3,999
4
30
38

Anyone who gave down vote on this should be ashamed not giving the reason for it. – FredyC Aug 27 '14 at 12:41
2

This should not be a down vote, it explains the details more relevantly than @idbehold's comments – Ian Lim Sep 07 '14 at 04:44
Thank you. Side note: in order to get this to work, I had to remove the hash symbol (#) prepended to the "my-button" id when using `document.getElementById`. `document.getElementById('#theButton')` returns `null` while `document.getElementById('theButton')` returns ``. – runeks Jun 12 '16 at 10:36
Ah, I've missed that. Thanks, it's fixed in the answer. – FredyC Jun 13 '16 at 11:27

score 2 · Answer 2 · edited May 23 '17 at 12:17

2

Perhaps, you would like to consider domready package? See browserify and document ready? for a great example.

If you are usind domready, your example will become like this:

message.js (stays the same)

module.exports = function (){
   return "Hello";
};

main.js (take note of the changes)

var domready = require("domready");
var getMessage = require('./message');

domready(function () {

   //This shows the alert when script loads
   alert(getMessage());

   function fnClick(){
    alert(getMessage());
   }     
});

index.html (stays the same)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/bundle.js"></script>
</head>
<body>
    <button onclick="fnClick();">Click</button>
</body>
</html>

edited May 23 '17 at 12:17

Community

1
1

answered Sep 07 '14 at 04:51

Ian Lim

4,164
3
29
43

1

Have you actually tried this ? Imo the issue has nothing to do with waiting for DOM to be loaded. Browserify will hide the `fnClick` from global namespace no matter when you actually define it. – FredyC Sep 08 '14 at 09:05
I have tried this way to refactor existing JS functions to Browserify :-) – Ian Lim Sep 08 '14 at 10:23

Web Harvesting · Answer 3 · 2016-10-24T05:28:37.570

1

1) install dom-event-listener as for: https://www.npmjs.com/package/dom-event-listener

2) in main.js add something like:

var domEventListener = require('dom-event-listener');
var element = document.getElementById('my-button');
domEventListener.add(element, 'click', function(event) {
    console.log(event);
});

edited Oct 24 '16 at 05:28

answered Oct 14 '16 at 01:37

Web Harvesting

11
2

Is there a reason to use this over that (current) top answer that recommends adding an event listener to the main.js file? – arcanemachine Mar 18 '21 at 21:03

Browserify, how to access main.js functions

3 Answers3