Js функции не работают с узлом и просматривают - PullRequest
Новая
       28

Js функции не работают с узлом и просматривают

0 голосов
/ 23 апреля 2020

Я новичок в Node и browserify, и у меня возникла проблема: если я использую browserify, он не будет работать с функциями, которые поступают из html импутами или кнопками из-за ошибки pickCSCSV не определено

в том смысле, что это onchange в html, но он не работает при вызове, если я не использую browserify, он работает нормально, но мне нужно browserify, потому что я буду использовать узел comm mysql для выбор банка, я принимаю рекомендации для этого приложения и подсказку для запуска узла на стороне клиента

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;
     }

1 Ответ

1 голос
/ 23 апреля 2020

Чтобы получить require работа, browserify оборачивает весь ваш код в функцию, и поэтому все функции, которые вы определили в своем файле, не будут доступны в глобальной области видимости. Это - и другие вещи - причина того, почему вы не должны использовать встроенные обработчики событий (атрибуты), чтобы регистрировать события, они будут работать только с функциями, которые видны в глобальной области видимости.

Что вы хотите сделать изменить <input type="file" id="inputCSV" onchange="pegarCSV(this)"> на <input type="file" id="inputCSV">

и добавить в конец файла следующее: 

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