0

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>

1 Answer 1

0

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

1
  • Perhaps, you should delete it from here. Apr 2, 2023 at 2:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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