Javascript 错误：未使用Node.js、NPM和Parcel定义HTML onClick_Javascript_Node.js_Input_Npm_Parceljs

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

javascript node.js input npm

Javascript 错误：未使用Node.js、NPM和Parcel定义HTML onClick,javascript,node.js,input,npm,parceljs,Javascript,Node.js,Input,Npm,Parceljs,我正在申请天气预报为了开发这个，我将Node.js与NPM和Parcel一起使用。（我需要这样做，否则OpenLayers将无法工作，但我以前从未使用过它。）我需要能够使用用户输入。例如，我希望用户单击一个按钮，然后发生一些事情下面是我需要完成的一个非常简单的解释按钮，我需要在index.html中 <input type="button" name="bt" value="test" onclick="clickKnop()"> 当然，在我的应用程序中，函数需要不同，但这

我正在申请天气预报

为了开发这个，我将Node.js与NPM和Parcel一起使用。（我需要这样做，否则OpenLayers将无法工作，但我以前从未使用过它。）

我需要能够使用用户输入。例如，我希望用户单击一个按钮，然后发生一些事情

下面是我需要完成的一个非常简单的解释

按钮，我需要在index.html中

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

当然，在我的应用程序中，函数需要不同，但这不是我的问题

当我在Node.js环境中编码时，它只有在我将clickKnop函数放在HTML的脚本部分时才起作用

当我把这个函数放到index.js文件中时，它就不再工作了。我得到以下错误：未捕获引用错误：未定义clickKnop 在HTMLInputElement.onclick上单击

当我在服务器上使用创建的/dist文件时也会发生这种情况，应用程序完成后，这些文件将在服务器上显示

我怎样才能做到这一点

希望你们能帮忙

编辑：

从“ol/Map.js”导入地图；
从“ol/View.js”导入视图；
从“ol/layer/Tile.js”导入TileLayer；
从“ol/source/OSM.js”导入OSM；
从“ol/source/TileWMS.js”导入TileWMS；
从“ol/proj”导入{fromlont}；
从“ol/control.js”导入{ZoomSlider}；
/*
他是一名技术人员，代码为tijd数据。
默认moet present datetime zijn，afgerond op 10分钟（naar beneden）。
10分钟后，他将在基辅的一个地方开始他的演讲。
在《世界报》和《opgehaald wordt》中，De eindgebruiker moet zelf将日期时间记录下来。
10分钟后，我就要离开了。
*/
//当前日期时间
const date=新日期（）；
//将当前日期时间舍入到最后10分钟
常数系数=1000*60*10；
const floorDate=新日期（Math.floor（Date.getTime（）/coeff）*coeff）；
//设置当前日期时间的格式，以便将其用作WMS viewparams的输入
const floorDateFormat=新日期（floorDate.toString（）.split（'GMT'）[0]+'UTC'）.toISOString（）.split（'.'）[0]。替换（'T'，''）；
console.log（floorDateFormat）；
//-从当前时间算起10分钟+输入视图参数的格式设置
const minutens=楼层日期；
minusTenMinutes.setMinutes（minusTenMinutes.getMinutes（）-10）；
常量minusTenMinutesFormat=新日期（minusTenMinutes.toString（）.split（'GMT'）[0]+'UTC'）.toISOString（）.split（'.'）[0]。替换（'T'，''）；
console.log（最小10分钟格式）；
控制台日志（floorDate）；
/*
地图上的文字。
De verschillende layers中的层开放式文字和AngeroePen。
DEVIEWPARAMS+日期时间moet mee gaan met De hierboven gedefinieerde datetime
这是一个很好的例子，
欢迎光临。
*/
让datetime=“2018-10-16 08:00:00”；
//基地欧洲
const wmsSourceBaseLayer=新的TileWMS({
网址：'http://localhost:8080/geoserver/O/wms',
参数：{
“层”：“O:Europe\u多边形”，
“平铺”：真
},
服务器类型：“地理服务器”，
交叉源：“”
});
const wmsBaseLayer=新TileLayer({
来源：wmsSourceBaseLayer
});
//天气| |默认温度
const wmsSourceTemperature=新TileWMS({
网址：'http://localhost:8080/geoserver/O/wms',
参数：{
“层”：“O:温度”，
“平铺”：正确，
“viewparams”：“所选时间戳：”+日期时间
},
服务器类型：“地理服务器”，
交叉源：“匿名”
});
const wmsWeatherLayer=新瓷砖层({
来源：wmsSourceTemperature
});
//更新zodat和weer komt的参数
//wmsSourceTemperature.updateParams（{'LAYERS'：'Observations:Observations_v'}）；
//德国LonLat已改装，以供在视图中使用
const germanyLonLat=[10.018343,51.133481]；
const germanyConvertedLonLat=fromLonLat（germanyLonLat）；
//为地图制作视图
常量视图=新视图({
中心：Germany ConvertedLonlat，
缩放：5
});
//使用图层构建地图
常量映射=新映射({
图层：[wmsBaseLayer，wmsWeatherLayer]，
目标：“地图”，
视图：视图
});
函数clickKnop（）{
log（'helloworld'）；
};


平铺WMS
#地图{
宽度：450px；
高度：500px；
边框：3倍纯色灰色；
}

您似乎混淆了前端脚本和后端脚本的区别

您必须开发一个能够与node.js应用程序对话的前端应用程序。您的HTML代码无法读取NodeJS源代码，因此会出现错误

Uncaught ReferenceError:clickKnop未在HTMLInputElement.onclick中定义
从外观上看，您必须分离出前端代码，以便使用类似的方法调用NodeJS应用程序上的端点
这方面的一个例子是：
前端使用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>

这是一个范围问题，在EventListener定义中是否有clickKnop（）
函数定义？包括.js文件，以便我们提供帮助-您可能没有关闭模板文件中的脚本标记。如果可能的话，在上下文中发布完整的代码，我会添加我的代码！给我一分钟，我看到node.js npm和parcel生成的project.1234.js为函数和变量提供了不同的名称。这可能是问题的一部分吗？（或者可能与此无关）好的。为什么不把脚本放在body标签中呢？我对这种Web开发方式很陌生，所以你可能是对的，我还没有完全理解这些概念。但我可以再问你一件事吗？现在我正在使用Node.js开发这个应用程序，但最终我希望它显示在我的Tomcat服务器上。我是这样做的：
<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>

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