Js functions do not work with node and browserify

Question

I'm a beginner in Node and browserify, and I'm having a problem, if I use browserify it doesn't work the functions that come from the html by imputs or buttons from the error pickCSV is not defined

being that it is an onchange in html but it doesn't work when called, if i don't use browserify it works normal, but i need browserify because i will use node comm mysql for the bank's select's, I accept recommendations for this application and a tip to run the node on the client side

html

 <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- 
    scalable=no" />
   <title>SIM TELEGESTÃO</title>
   <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
   <script src="node_modules/leaflet/dist/leaflet-src.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
   <div id="map"></div>
   <input type="file" id="inputCSV" onchange="pegarCSV(this)">
   <script src="bundle.js"></script>
   </body>
   </html>

JS

   // require modules
      var L = require('leaflet');
      var $ = require('jquery');
      var mysql = require('mysql');

      var tcsv = [];
      var nMuc;
      var arMuc= [];
      var bounds = [];
      var arMu = [];
      var leitorDeCSV = new FileReader();
      var tcsv1 = [];
      var achMuc;
      var lcz2;
      var selMuc = [];
      // Create the map
      var map = L.map('map').setView([-90.59431,-70.82561], 18);

      // Indicate leaflet the specific location of the images folder that it needs to render the page
      L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';

      // Use OpenStreetMap tiles and attribution
      var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var attribution = '© OpenStreetMap contributors';

      // Create the basemap and add it to the map
      L.tileLayer(osmTiles, {
      maxZoom: 18,
      attribution: attribution
      }).addTo(map);


     function pegarCSV (inputFile){
      var file = inputFile.files[0];
      leitorDeCSV.readAsText(file);
      leitorDeCSV.onload = leCSV;
     }

[…]i need browserify because i will use node comm mysql[…] mysql module won't run in the browser, and even if it would then it wouldn't be something you want to do. And if you run node on the server, you would exchange the data via HTTP between browser and server. But for this purpose, you don't need browserify. — t.niese
– t.niese, Commented Apr 23, 2020 at 14:58
As I said I am new to technology, at the moment I need to solve the problem of the function not being executed when I am in the bundle.js, however if I make a different .js that does not use browserify it works normally the imput to call the function — FireWallSP
– FireWallSP, Commented Apr 23, 2020 at 15:02

t.niese · Accepted Answer · 2020-04-23 15:07:08Z

2

To get require work browserify is wrapping your whole code into a function and as of that all functions that you defined in your file won't be available in the global scope. This - and other things - are the reason why you should not use inline event handlers (attributes), to register events, those will only work with functions that are visible in the global scope.

What you want to do is to change <input type="file" id="inputCSV" onchange="pegarCSV(this)"> to <input type="file" id="inputCSV">

and add the following to the end of the file:

document.getElementById('inputCSV').addEventListener('change', 
  function(event) {
    pegarCSV(event.currentTarget);
  }, false)

answered Apr 23, 2020 at 15:07

t.niese

41k9 gold badges78 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Js functions do not work with node and browserify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related