Changing Global Variable By User Input Via Function
Solution 1:
First off, I commented out the parts not relevant to the question as I did not have that code.
NOT having a global is a good practice. In order to do that, I created a module that included your function as well as a way to get and set the private value through the module. There are likely simpler ways (not having to do new MyApp) but I used that to show how you can create an instance of the app with unique values. For example you might include var myOtherApp = new MyApp("2017-08-23"); for a second instance.
I also removed the event handler from the markup and added one in the script. The reason your original did not work was because you included your .js file AFTER the markup with a call to it so it was not yet defined. This now works with <script... after that.
I made your map element smaller to show the inputs easier in this example.
I also showed how to set the (now not global) value in the script as well as from the function execution.
I also set the input to the value by default (several ways that could be done)
/*
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';
*/varMyApp = function(setDate) {
/* Private variables and functions that only
other private or public functions may access
and cannot be accessed outside this Module
*/// set a date as sent or use the defaultvar iAmPrivate = setDate || "2018-10-19 08:00:00";
/* Properties and methods contained by
this object being returned will be public
and be accessible in the global scope.
*/return {
setinputvp(value) {
iAmPrivate = value;
},
getinputvp() {
return iAmPrivate;
},
/* probably want parsing of the date etc. in here */doStuff: function() {
var nameElement = document.getElementById("someInput");
inputvp = nameElement.value;
console.log(inputvp);
}
}
};
// Create a app with data for date textvar myApp = newMyApp("2018-12-13 11:30:00");
console.log(myApp.inputvp);
myApp.inputvp = "2018-7-13 14:22:00"console.log(myApp.inputvp);
let gotodate = document.getElementById('go-to-date');
let inputDate = document.getElementById('someInput');
// put value in the input (could be done in an app function also)
inputDate.value = myApp.inputvp;
gotodate.onclick = myApp.doStuff;
/*
var wmsSource = new TileWMS({
url: 'http://localhost:8080/geoserver/Observations/wms',
params: {
'LAYERS': 'Observations:Obs',
'TILED': true,
viewparams: 'chosen_timestamp:' + myApp.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
});
*/#map {
border: solid lime 1px;
}<head><title>Tiled WMS</title><style>#map {
width: 50px;
height: 50px;
}
</style></head><body><divid="map"></div><inputid="someInput"type="text" /><buttontype="button"id="go-to-date">GoToDate</button><scriptsrc="./index.js"></script></body>Solution 2:
var date=1;
functiondoStuff() {
var nameElement = document.getElementById("someInput");
date = nameElement.value;
console.log(date); //shows after I enter a new value the new value//it is ok because the it show the value after the function was called
};
// console.log(date); //shows the original value, 1// the function hasn't been called yet
Post a Comment for "Changing Global Variable By User Input Via Function"