I am making a weather application and it is essentially working. (It is my first GIS-application,) It is just still very basic.
I made de application with PostGIS, NPM (Node.js/Parcel), GeoServer (Tomcat) and OpenLayers 5.
Now I am trying to add the simple option to change a variable with user-input. Except, when I run the application it tells my that my function (doStuff) is not defined. It is in the same JavaScript file as all the other JavaScript and that works perfectly fine.
(When I put the code in the body of my HTML, then it does work. (The input part.) But I need the function to be in the JavaScript file. Not only because that is where it belongs, but also because I need the input for a variable in that file.)
Below is the code. What am I missing?
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';
var inputvp = "2018-10-19 08:00:00";
//Below the function that I made for the input. But also the function that gives an ERROR. (doStuff is not defined)
function doStuff() {
var nameElement = document.getElementById("someInput");
inputvp = nameElement.value;
console.log(inputvp);
};
var wmsSource = new TileWMS({
url: 'http://localhost:8080/geoserver/Observations/wms',
params: {'LAYERS': 'Observations:Obs', 'TILED': true, viewparams: 'chosen_timestamp:' + inputvp},
serverType: 'geoserver',
crossOrigin: 'anonymous'
});
var wmsLayer = new TileLayer({
source: wmsSource
});
var view = new View({
center: [0, 0],
zoom: 1
});
var map = new Map({
layers: [wmsLayer],
target: 'map',
view: view
});
--
<!DOCTYPE html>
<html>
<head>
<title>Tiled WMS</title>
<style>
#map {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<input id="someInput" type="text">
<input type="button" value="GoToDate" onClick="doStuff()">
<script src="./index.js"></script>
</body>
</html>
