错误：未使用Node.js，NPM和Parcel定义HTML onClick

Question

我正在制作天气应用程序。

为了开发这个，我使用NPM和Parcel的Node.js。（我需要这样做，因为否则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文件中时，它不再起作用了。我收到以下错误：未捕获的ReferenceError：在HTMLInputElement.onclick中未定义clickKnop

当我在我的服务器上使用created / 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层的函数来改变时间变量。

再一次，我现在的代码非常混乱，但我仍在努力，所以请过去看看..

希望这可以帮助...