【发布时间】：2019-06-02 05:32:43
【问题描述】：
我正在制作一个天气应用程序。
为了开发这个，我将 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 is not defined 在 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 层来更改时间变量的函数。
再说一遍，我现在的代码真的很乱，但我仍在努力，所以请看过去..
希望这会有所帮助...
【问题讨论】：
-
它是一个范围问题，您在 EventListener 定义中是否有
clickKnop()函数定义？包含.js文件以便我们提供帮助 -
stackoverflow.com/questions/43209534/… - 您可能没有关闭模板文件中的脚本标签。如果可能的话，在上下文中发布完整代码
-
我将添加我的代码！给我一分钟
-
我看到node.js npm和parcel生成的project.1234.js给函数和变量起不同的名字。这可能是问题的一部分吗？ （或者可能与它无关。）
-
好的。为什么不把脚本放在body标签里面呢？
标签： javascript node.js input npm parceljs