I am making a weather application and it is essentially working. (It is my first GIS-application, so I am really glad with that!) 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 the code. Can anybody tell me what I am 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;

        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>
        <title>Tiled WMS</title>
          #map {
            width: 500px;
            height: 500px;

    <div id="map"></div>
    <input id="someInput" type="text">
    <input type="button" value="GoToDate" onClick="doStuff()">
    <script src="./index.js"></script>

I also posted this question on StackOverflow, because it was more a general coding question maybe than a real GIS question. I got an answer there!

For the people that might be trying this in the future but don't know the good solution: Here the link ->


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.