Ошибка: HTML onClick не определен с Node.js, NPM и Parcel

Question

Я делаю приложение погоды.

Для разработки я использую Node.js с NPM и Parcel. (Мне нужно сделать это, потому что иначе OpenLayers не будет работать, но я не работал с этим раньше.)

Мне нужно уметь работать с пользовательским вводом. Например, я хочу, чтобы пользователь нажал кнопку, а затем что-то должно произойти.

Ниже очень простое объяснение того, что мне нужно сделать.

Кнопка, которая мне нужна в index.html

<input type="button" name="bt" value="test" onclick="clickKnop()">

Функция, которая должна быть выполнена после щелчка, который я должен быть в index.js

    function clickKnop(){
        console.log('Hello World'); 
    };

Конечно, в моем приложении функция должна отличаться, но это не моя проблема.

Когда я пишу код в среде Node.js, это работает ТОЛЬКО, когда я помещаю функцию clickKnop в часть скрипта моего HTML.

Когда я помещаю функцию в мой файл index.js, она больше не работает. Я получаю следующую ошибку: Uncaught ReferenceError: clickKnop не определен в HTMLInputElement.onclick

Это также происходит, когда я использую созданные / dist файлы на моем сервере, на которых они будут представлены после завершения приложения.

Как я могу сделать эту работу?

Надеюсь, вы, ребята, можете помочь!

РЕДАКТИРОВАТЬ:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import TileWMS from 'ol/source/TileWMS.js';
import {fromLonLat} from 'ol/proj';
import {ZoomSlider} from 'ol/control.js';

 /*
  Hieronder komt het stukje code voor de datum en tijd.
  Default moet present datetime zijn, afgerond op 10 min (naar beneden).
  Vervolgens moeten er stapjes van 10 minuten terug gemaakt worden om uit te kiezen.
  De eindgebruiker moet zelf ook een datetime in kunnen voeren welke dan opgehaald wordt.
  Hiervoor worden ook de stapjes van 10 minuten gebruikt.
 */

 // Current datetime
 const date = new Date();
 
 //Round current datetime to last 10 min
 const coeff = 1000 * 60 * 10;
 const floorDate = new Date(Math.floor(date.getTime() / coeff) * coeff);

 //Format the current datetime so that it can be used as input for the WMS viewparams
 const floorDateFormat = new Date(floorDate.toString().split('GMT')[0]+' UTC').toISOString().split('.')[0].replace('T',' ');
 
 console.log(floorDateFormat);
 
 
 // -10 minutes from current time + formatting for input viewparams
 const minusTenMinutes = floorDate;
 minusTenMinutes.setMinutes(minusTenMinutes.getMinutes() - 10);
 const minusTenMinutesFormat = new Date(minusTenMinutes.toString().split('GMT')[0]+' UTC').toISOString().split('.')[0].replace('T',' ');
 
 console.log(minusTenMinutesFormat);
 console.log(floorDate);


 /*
  Hieronder wordt de map gemaakt.
  De verschillende layers en layergroepen worden aangeroepen.
  De viewparams + datetime moet mee gaan met de hierboven gedefinieerde datetime
  Daarnaast moet de gebruiker ook kunnen wisselen tussen de verschillende weersoorten,
  hiervoor moeten de params geüpdatet worden.
 */
 let datetime = "2018-10-16 08:00:00";
 
 //Base Europe
 const wmsSourceBaseLayer = new TileWMS({
      url: 'http://localhost:8080/geoserver/O/wms',
      params: {
        'LAYERS': 'O:Europe_Polygons',
        'TILED': true
      },
      serverType: 'geoserver',
      crossOrigin: ''
    });

    const wmsBaseLayer = new TileLayer({
      source: wmsSourceBaseLayer
    });
 
 //Weather || DEFAULT TEMPERATURE
 const wmsSourceTemperature = new TileWMS ({
      url: 'http://localhost:8080/geoserver/O/wms',
      params: {
        'LAYERS': 'O:Temperature',
        'TILED': true,
  'viewparams': 'chosen_timestamp:' + datetime
      },
      serverType: 'geoserver',
      crossOrigin: 'anonymous'
    });
 
 const wmsWeatherLayer = new TileLayer({
  source: wmsSourceTemperature
 });

 //Update de params zodat er ander weer komt
 //wmsSourceTemperature.updateParams({'LAYERS': 'Observations:observations_v'});
 
 //LonLat of germany converted for use in view
 const germanyLonLat = [10.018343, 51.133481];
 const germanyConvertedLonLat = fromLonLat(germanyLonLat);
 
 //Making a view for the map
    const view = new View({
      center: germanyConvertedLonLat,
      zoom: 5
    });
 
 //Building the map with the layers
    const map = new Map({
      layers: [wmsBaseLayer, wmsWeatherLayer],
      target: 'map',
      view: view
    });
 
  
  
  
  
 function clickKnop(){
  console.log('Hello World'); 
 };
    

<head>
  <title>Tiled WMS</title>
  <!--<meta http-equiv="refresh" content="10"/>-->
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    #map {
      width: 450px;
      height: 500px;
   border: 3px solid grey;
    }
  </style>
</head>

<body>
  <div id="map" class="map"></div>
  <script src="./index.js"></script>
  <input type="button" name="bt" value="test" onclick="clickKnop()">
</body>

Сейчас это своего рода беспорядок, но я хочу сделать так, чтобы другой WMS-слой геосервера вызывался с разными параметрами в зависимости от времени.

Для этого мне нужен ввод из моего HTML (и я также хочу сделать кнопку, чтобы вернуться назад с шагом в 10 минут).

Поэтому я хочу сделать функции, которые вызывают WMS-слои, которые изменяют переменную времени.

Опять же, код, который у меня сейчас есть, действительно грязный, но я все еще работаю над этим, поэтому, пожалуйста, посмотрите на это...

Надеюсь это поможет...

Answer 1

Похоже, вы перепутали разницу между сценариями внешнего интерфейса и сценариев бэкэнда.

Вам нужно будет разработать приложение для внешнего интерфейса, которое сможет взаимодействовать с вашим приложением node.js. Ваш HTML-код не может прочитать исходный код NodeJS, и именно поэтому вы получаете сообщение об ошибке Uncaught ReferenceError: clickKnop is not defined at HTMLInputElement.onclick,

Похоже, вам придется отделить код внешнего интерфейса для вызова конечных точек в приложении NodeJS, используя что-то вроде https://expressjs.com/.

Примером этого может быть:

Интерфейс с использованием JQuery

<body>
<a id="UpdateMap">Update Map</a>
<script src="jquery..." />
<script>
    $('#UpdateMap').click(function(){
       $.get( "myNodeJSServer:Port/UpdateMap", function( data ) {
          $( ".map" ).html( data );
          alert( "Load was performed." );
        });
    });
</script>
</body>

Бэкэнд с использованием Express и NodeJS

...
//In your NodeJS Express Routes Application Page
app.get('/UpdateMap', function (req, res) {
  clickKnop();
})