Function in OpenLayers 5 JavaScript does not work

Question

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;
            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>

html javascript node.js openlayers

Trisha · Answer

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 ->

https://stackoverflow.com/questions/53760715/changing-global-variable-by-user-input-via-function/53762776#53762776

Function in OpenLayers 5 JavaScript does not work

One Answer

Add your own answers!

Ask a Question